Posted by: calsunshine | August 10, 2011

Hello World in SE4

Tutorial: How to create a Hello World page in Social Engine. Tested in SE 4.1.6.

  • Go to Admin Panel->Package Manager->Developer SDK->Create a Package.
  • Choose Type ‘Widget’ and fill out the rest of the form. Note that the name can only be Lowercase, alphanumeric, and hyphens (“-“).
  • Then it will save a .tar file to your disk. For example, a “widget-travel-4.0.0.tar” file. travel is my widget name.
  • Go back to Package Manager->Install New Packages and browse the .tar file generated.
  • Follow the instructions to finish the install.
  • By default, an empty widgets will install 4 files to the SE folders. In my case, these 4 files and 1 folder are installed:
  1. \SocialEngine415\application\packages\widget-travel-4.0.0.json
  2. \SocialEngine415\application\widgets\travel\ folder.
  3. \SocialEngine415\application\widgets\travel\Controller.php
  4. \SocialEngine415\application\widgets\travel\index.tpl
  5. \SocialEngine415\application\widgets\travel\manifest.php

If you cannot generate or install the .tar file due to some permission problem. Download the “widget-travel-4.0.0.tar” I uploaded to the Dropbox share folder. Then unzip the .tar and place the respective files into their folders.

  • After installation of your widget, go to Admin Panel->Layout Editor. I created a new page called Hotels.
  • Then browse to the Available Blocks section and under Widgets you will see your widget there. In my case, there is a Travel widget.
  • I can then drag the Travel widget onto the Hotels page I created. Save the page.
  • Now let’s modify the view. Open \SocialEngine415\application\widgets\travel\index.php. Replace the content with the following:

<?php
    echo “<H1><b>Hello World!</b></H1>”;
?>

Advertisements

Responses

  1. i tried it again using my mac and it’s working now.

    on the sandbox, i think it still works but it’s crashing a lot probably coz i’m using the oldest version of xp and internet explorer lol.

    anyway, we can start looking into modifying the code….

    \SocialEngine415\application\widgets\travel\index.php
    is this a new file that u create under the above directory? i did it and it’s still page not found when i go to the hotels page. I’ll look at it more tomorrow since i’m more free.

  2. \SocialEngine415\application\widgets\travel\index.php is generated by the build widget function. I just replaced what was in it. I cannot open the hotels page the first few times. Then I restarted my Apache and it worked.

    • But index.php u create urself right? There’s only 3 files in that folder for me, no index.php. So I create one by myself and it doesnt work

      • My bad, it is index.tpl that was auto generated. You don’t need to create index.php, just modify index.tpl.

  3. i see…yup it’s working now. I did modify index.tpl before but it wasn’t working coz i used a chinese character quote instead of an english one…

    • Do you have any idea how to work with the model part? there is a controller and view file for the widget, but how to interact with the data from MySQL?

      For example, we enter a user’s profile page, there should be an area displaying all the trips collection the user has. That information has to come from DB and there is no such table for it yet. I am wondering if the widget should create a .sql file to create a new table like “Trips” with fields like Name, Location, photos, etc.? Then the controller can use a connection stirng like what this page says
      http://www.socialengineforum.com/index.php?/topic/1303-se-database-query/
      to get the trips data from DB and render the view to display the trips?

      Maybe we cans study the other widgets or modules to learn.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: