Expressionengine Tutorial for Newbie

This tutorial only for them who want to start work with expressionengine[v 1.x.x] and no idea about it.

Get the Expressionengine installation files. There are two version available, Free and Commercial.
Decide first which one you need, commercial version has some extra module like forum, gallery,
mini commerce. if you need to develop a site which will have only one or two products, i think
we should use EE commercial instead of e-commerce tool like x-cart. Try to get the latest version. you can’t
download the version from bangladesh, i tried several times. so contact to other programmer as they have this
already. Now follow the following steps to build a simple template with dynamic data –

1. unzip your file to your localhost folder. Let your folder name is eedemo. now browse it, you will be re-directed
to installation file automatically, so the url may be like http://localhost/eedemo/install.php

2. Click on the button “Click here to begin” to move forward, select the terms and conditions and submit.

3. During installation, you will see a page titled with “Name of your “system” folder”. you will found a folder named
“system”, rename that folder named first. then put the name on the box. Its important to hide the admin panel url. Admin
panel url will formed by adding this folder name with the main url. Let you have gave folder name to “adm1n”, so admin url
will be http://localhost/eedemo/adm1n/

4. On the next page, you have to put site settings. As a newbie, you should move forward without complicated configuration.
so just put as follows:
“Name of the index page of your ExpressionEngine site”
- default value may come index.php, keep this
“URL to the directory where the above index page is located”
- pre populated, keep this
“URL to your “system” directory”
- pre populated, keep this
“Email address of webmaster”
-put your email adress here
“What type of server are your hosted on?”
- select unix although you are working on windows, as your site will be moved to unix system later.
“MySQL Server Address”
- Put “localhost”
“MySQL Username”
- Put the mysql username here, so far i know there is a default user name “root” on our localhost
“MySQL Password”
- Put the mysql password here, so far i know there is a default user password “”(blank) on our localhost
“MySQL Database Name”
-put the database name, if you didnt created a database before, please create with your software, using
phpmyadmin(http://localhost/phpmyadmin/), or mysqlfront, or sqlyoug
“Database Prefix”
- keep the pre populated value
“Encryption Settings”
-keep the default value
“Username”
-put a username
“Password”
- put a secure password, dont put password like 123456, put a alphanumeric password
“Your email address”
-put your email address for now, later you should change this to site owner email address
“Name of your site”
- put a meaningfull name with the related project, you can use this value later.
“Your Time Zone”
-its important to choose perfact timezone, if site’s targetted visitor from USA, choose USA timezone, or if
UK, chose EU settings.
Now submit.

5. if you see “ExpressionEngine has been successfully installed!”, your installation is successfull. Now its time to
working with template, weblog etc. before start works – rename your install.php file, don’t rename it like install1.php,
because it is executable, someone may install ee again and your data may corrupt, so rename it like install.php.bak, also
dont delete this file, it will usefull later to upgrade the version.

6. browse you site through http://localhost/eedemo (if your installation foldername is eedemo), also login to admin( as per my example, it
will be http://localhost/eedemo/adm1n/), you will see some data on frontend as there are already templates and weblogs. Here is breif description
about templates, weblog, categories, fileds etc.

Templates: EE templates are the container where you data/ site content will be displayed, its similar to html file but you have to put expression engine’s
own tag to pull the data from database, or you can put php tag. ee templates not like joomla or other cms, you have to put the templates in database through
admin panel, i’ll show this later.

Weblog: Weblogs are the container to store your data. you have to create your own weblog to store the data. Let your site has a portion named news,
so you can define a weblog named “news”. If you want to categorize your news items, you have to create categories/categories. i’ll give you the details
later.

Fields Group: Let you have a weblog named “news” and another weblog named “FAQ”, so every news item may have some fileds like “page title”, “short description”,
“details”. let “FAQ” have some fields “question”, “answer” etc. so it is cleared that you have to customize your field. EE is perfect for this. you can create
fields as much as you need. First you have to create a field group, then add fields on that group, later define which weblog will use a fieldgroup. once you have
created these all, you have to put the field name, ee tags query on templates to show the data.

7. ok, so you have little idea abt EE. Now its time to store and show some contents. I am showing you, how to build a specific portion(like news ) of your
site. First think which filed you needed for every news item. on this step you have to create a fieldgroup with your needed fields. News Item’s may
have
Title, Short Description, Description
FYI, for every entry – expression engine has two default field, Title and URL title, so if you dont need more title, you dont have to create title field.
i’ll tell you later about URL Title
so as stated above – we have to create two field “Short Description”, “Description”
-> login to admin and go to “CP Home › Admin › Weblog Administration › Field Groups”
you’ll see , there is already one field group named “Default Field Group”. Click on the link “Create New Fieldgroup” on right top. We are going
to create fields for news, so let put “News Field Group”, save it.
-> so we have the field group “News Field Group”, but we didnt define fields of this group, so click on the link “Add/Edit Custom Fields” of this
group.
-> a new window will appear, where fields will be listed of this group, as we didnt define the field yet, you’ll see “There are no custom fields in this group”
so click on the link “Create a New Custom Field” on right top, an new window will appear.
“Field Name”
- put a name which will be uniqe and without space, it will be used on templates later. so we have to create a field named short description, let
put here “news_short_desc”
“Field Label”
- this need not be unique, its just a label to show at admin, put a meaningful label, let put “short description” here
“Field Instructions”
-will use at admin, so skip this with empty value for now
“Field Type”
- There are five value available here, as short description may have two or three lines, let choose “textarea” with 3 rows. there are some other
value available which is much usefull, you should know this all later.
“Default Text Formatting for This Field”
- there are three values availble here, xhtml, auto <br />, none. just choose none as we dont need any extra formatting. these are usefull to show data
on frontend. if you choose xhtml, some xhtmlk tag like <p> will be automatically inserted to your content while displayed on frontend. you will see this
later how this is so useful.
keep the other field to default values, you may need to change the other settings later. for now just skip.
submit your settings.
Great, you have one field now. lets define another which is “Long Description”. so click to “Create a new custom field again”.

“Field Name”
- let put “news_desc”
“Field Label”
- let put Description
“Field Instructions”
- so skip this with empty value for now
“Field Type”
- choose textarea
“Default Text Formatting for This Field”
-choose xhtml
keep the other field to default values, you may need to change the other settings later. for now just skip.
submit your settings.
ok, so we hava field group named “News Field Group” which has two fields “news_short_desc”, “news_desc”

8. Your news may be need to categorize like, “sports”, “international”, “business”. so now its time to create category group and categories in category group.
move to “CP Home › Admin › Weblog Administration › Category Groups” on admin.
you will see there is already one default category group. if you dont need categorize your items, you dont need this step.
Click on link “Create a new category group” on right top, let put a name “News Categories Group”. you can put anything you want, but wise to put a
meaningful one. after added the categories group, you’ll be redirected to category groups list. you’ll see, your new created category
group doesn’t have any category. so click on the link “Add/Edit Categories” beside the category group name, you’ll see there is no categories, :(
as we didnt added any categry yet. Click “Create a new category” on right top. put a meaningful name on category creating page because it’ll be used
on frontend, let put “International”, you can define a parent category also. for now create some parents category as same way. as example i’ve create
two, “international”, “sports”.

so we now have category group and categories within a group.

9. Now we’ll create weblog where we’ll store site contents. to do this , move to
“CP Home › Admin › Weblog Administration › Weblog Management”
you’ll see there is already a weblog named “Default Site Weblog”. let create another one named “news”, so click on the link “Create a New Weblog”
on right top, follow following steps for the new window,
“Full Weblog Name”
- put a name as you wish, let put “News”
“Short Name”
- this’ll be used on template, let put “news” here
“Duplicate existing weblog’s preferences”
- for now just choose, “Do not duplicate”
“Edit Group Preferences”
- click on yes, a new portion will be appeared. select the category group(“News category group”), select the status group “default” and
field group to “Field Group”
keep the other settings, and submit.

hurray!, you weblog is created, so now you can add content.

10. Now move your mouse to link “publish” on left top, and click on “News”. You can see a window with your created fields, wao! ok put
the title, url title will auto generated, put short description, description.
click on the categories tab, you’ll see your categories that created for news. choose anyone and then Submit
- follow this step again to add more news(content)

11. so you have content on database, you want to show them on front-end by browsing http://localhost/eedemo/index.php/news/, to show the content
you have to create a templategroup. move to “CP Home › Templates › Template Management “
Click on “Create a New Template Group” on right top of the new window, put a name, to browse by http://localhost/eedemo/index.php/news/ , you have
to put here “news”, if you want to browse news portion by http://localhost/eedemo/index.php/sitenews/, put here “sitenews”, let put “news” here.
“Duplicate an Existing Template Group?”
- choose do not duplicate a group for now
- dont check the checkbox, if you check this box, it will be default template of site, submit now.
Now you will see templates group list on template management page. select the “news” template group, you’ll see a template named “index” on right portion
of this window. When a template group is created, a template named “index” is automatically created.

12. Click on the index template to edit it. put the following codes on this template and submit
if you need to comment a line, just do like
{!–
<div>this is commented by expression engine tag, so it will not displayed on fornt end</div>
–}

so, i have commented on each line of ee tags for you help
each EE tag start and end with curly bracket.

    <!– starts –>
    {assign_variable:my_weblog="news"}{!–defineing a variable, so variable my_weblog a value "news" –}
    {assign_variable:my_template_group="news"}{!–defineing a variable, so variable my_template_group a value "news" –}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>EE Test Site – News</title>
    </head>

    <body>

    <a href="{path=news}">News</a>
    {!– here {path=news} makes a url with add "news to base url", so {path=news} will
    create a url like http://localhost/eedemo/news/ –}

    <ul>

    {!– following is expression engine query which will pull data from specific weblog, here {my_weblog} has a value
    "news" we already assigned on top of the template, orderby, sort will show the items in descending order by date, limit
    will show 10 items, there are a list of parameters available for weblog query tags, for more go to expression engine site –}

    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="10″}
    <li>
    <b><a href="{title_permalink=news/details}">{title}</a></b>
    {!–
    {title_permalink=news/details} will create the link automatically by the following rule
    site_url/news/details/url_title
    {title} is the default field
    –}
    <p>{news_short_desc}</p>{!– news_short_desc will pull the short description –}

    <p><a href="{title_permalink=news/details}">details…</a></p>
    <p>Added on

    {categories}{category_name}, {/categories}
    {!– this is pull the category name where we have inserted the entry –}

    </p>
    </li>
    {/exp:weblog:entries}
    {!– query tag must be closed, if you have more entries want to navigate, there are pagination tags, for more go to EE docs wiki/docs site –}

    </ul>

    </body>
    </html>
    <!– ends –>

13. Ok now put your url to http://localhost/ee_tutorial/index.php/news/, you will see the news list that you added. each item has hyperlink to details page
but we dont craeted details template yet. so back to admin templates group list page. choose the news, and click on “New Template” link.
- put a template name, as we already have linked each news item to “details”, let put “details”. with this template , we will show each item’s details
while click on a link of news index page.
- select Template Type to “web page”, you have to select proper type of template, see the other already builts template about the other template type.
- now edit the “details” template
-put the following details template

    <!– starts –>
    {assign_variable:my_weblog="news"}{!–defineing a variable, so variable my_weblog a value "news" –}
    {assign_variable:my_template_group="news"}{!–defineing a variable, so variable my_template_group a value "news" –}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>EE Test Site – News – details</title>
    </head>

    <body>

    <a href="{path=news}">back to news index</a>
    {!– here {path=news} makes a url with add "news to base url", so {path=news} will
    create a url like http://localhost/eedemo/news/ –}

    <ul>

    {!– following is expression engine query which will pull data from specific weblog, here {my_weblog} has a value
    "news" we already assigned on top of the template, orderby, sort will show the items in descending order by date, limit
    will show 10 items, there are a list of parameters available for weblog query tags, for more go to expression engine site –}

    {exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" dynamic="on"}
    {!–  dynamic="on" will put only one entry based on url title, so specific item will be pulled down–}
    <li>
    <b><a href="{title_permalink=news/details}">{title}</a></b>
    {!–
    {title_permalink=news/details} will create the link automatically by the following rule
    site_url/news/details/url_title
    {title} is the default field
    –}
    <p>{news_desc}</p>{!– news_desc will pull the description –}

    </li>
    {/exp:weblog:entries}
    {!– query tag must be closed, if you have more entries want to navigate, there are pagination tags, for more go to EE docs wiki/docs site –}

    </ul>

    </body>
    </html>
    <!– ends –>

ok, now browse the front end news section. thats all for now. I’ve posted other two articles how to maintain the standards and removing
the index.php from url.

this tutorial is for extremely EE newbie. highly appriciated your suggestions.

About these ads
This entry was posted in Uncategorized. Bookmark the permalink.

11 thoughts on “Expressionengine Tutorial for Newbie

  1. Its a very nice tutorial. Its very much helpful to cope up with EE for a novice.

    But, the problem i have faced is that comments are not working over here.

    Please mention, how do i define comments ??

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