2
362

Initialization

Installation

Installation guide

Initialize the directory of your site:

$ git init /var/www/izendsms.com
$ cd /var/www/izendsms.com

Declare your identity:

$ git config user.name izend
$ git config user.email izend@izend.org

Pull out the current version of iZend Core in a branch called izend:

$ git remote add izend https://github.com/izend/izend
$ git fetch izend
$ git checkout -b izend izend/master

Go to your master branch:

$ git checkout -b master
$ git branch
  izend
* master

Make sure the Apache server is allowed to write the configuration files:

$ cd /var/www/izendsms.com
$ chgrp -R www-data .

For more security, check that the access to the configuration files is limited to the server:

$ cd /var/www/izendsms.com/includes
$ chmod 660 db.inc config.inc settings.inc aliases.inc paypal.inc payline.inc

Add a file called izendsms.conf in the directory /etc/apache2/sites-available with the following content:

izendsms.conf
<VirtualHost *:80>
    DocumentRoot /var/www/izendsms.com
    ServerName local.izendsms.com
    php_admin_value open_basedir /var/www/izendsms.com
    php_admin_value upload_tmp_dir /var/www/izendsms.com/tmp
</VirtualHost>
<Directory /var/www/izendsms.com>
    AllowOverride all
    Require all granted
</Directory>

Activate the website:

$ sudo a2ensite izendsms

Reload Apache:

$ sudo systemctl reload apache2

Add the following line in /etc/hosts :

127.0.0.1    local.izendsms.com

Enter local.izendsms.com in the address bar of your navigator.

Fill in the installation form:

What is the name of the site?

What is the email address of the webmaster?

In what languages is the content of the site written?

 en  fr

IMPORTANT: Configure a content in English and in French in order to be able to follow all the instructions about programming a website in several languages.

What is the default language?

 en  fr

Do you have a database server?

 yes  no

Do you use MySQL or PostgreSQL?

 MySQL  PostgreSQL

What is the name of the database?

What is the name of the database host?

What are the name and the password of the user of the database?

Do you use an existing database?

 yes  no

If no, what are the name and the password of the administrator of the database server?

What is the prefix of the tables?

What are the name and the password of the administrator of the site?

NOTE: Enter a combination of lowercase and uppercase letters and digits of at least 6 characters.

Press Configure.

Click on the logo to display the initial website.

Git
  1. /izendsms.com
    1. .htaccess
    2. avatars
      1. foobar.png
    3. includes
      1. aliases.inc
      2. config.inc
      3. db.inc
    4. logos
      1. sitelogo.png
    5. robots.txt
    6. sitemap.txt

Commit this initial version:

$ git status
$ git add --all
$ git commit -m"Initial website by iZend"
$ git status
$ git log --graph --oneline

Edit the file config.inc in the folder includes.

Set the parameter $socializing to 'either' to display the share on social media bar to the left of the page of the website:

  1. $socializing='either';  // false, 'inline', 'bar', 'either', 'both'

Change the file favicon.ico at the root of the site.

favicon.ico
Git
  1. /izendsms.com
    1. favicon.ico
    2. includes
      1. config.inc

Commit this version:

$ git status
$ git add favicon.ico include/config.inc
$ git commit -m'Adds favicon.ico and sets $socializing to 'either' in config.inc'

Content

Click on the shadow in the banner. Enter with the identification code and the password of the administrator, i.e. foobar and f00bar.

The initial site has one thread called Content. This thread has two nodes called Welcome and Documentation. IMPORTANT: Don't delete node 1 which is used to build the content of the home page by the action home and which is referenced by the configuration parameter $root_node in the file config.inc in the folder includes.

Click on the keyboard in the toolbar to edit the content of the home page.

Mask content 1:

Modify the content 2:

Select all the content of the input field. Press Del to delete it. Type /files/images/sms_en.png. Select all the content.

Press on the button <img> in the bar above the input field.

The editor has created a tag <img> with the property src="/files/images/sms_en.png".

Add the property width="200" to the tag <img>.

Select all the content of the input field.

Press on the button <p> to insert the tag <img> in a <p> tag.

Press Modify.

Press on the flag to display the version in French.

Modify the content 2:

Press Modify.

Create the folder files/images at the root of the website:

$ cd /var/www/izendsms.com
$ mkdir -p files/images

Download the files sms_en.png et sms_fr.png in the folder files/images:

sms_en.png
sms_fr.png

Display the node.

Press on a flag to check the result in English and in French.

Return in the editor.

Make sure that all the buttons for the social networks in Options are checked.

Press Edit to validate the options for all languages.

Set the parameter Image to /files/images/sms_en.png for the version in English and to /files/images/sms_fr.png for the version in French to define the image which is displayed by social networks when sharing the home page of the website.

Click on the title Content of the thread at the top right of the banner. Hide content 2 Documentation in the list.

Click on the logo in the banner to display the home page.

Git
  1. /izendsms.com
    1. files
      1. images
        1. sms_en.png
        2. sms_fr.png

Commit this version:

$ git status
$ git add files
$ git commit -m'Edits the home page'

Edit the files views/banner.phtml and views/sidebar.phtml.

banner.phtml
  1. <?php if (false): ?>
  2. <?php if (!empty($search)): ?>
  3. <?php echo $search; ?>
  4. <?php endif; ?>
  5. <?php endif; ?>
  6. <?php if (true): ?>
  7. <?php if (!empty($headline)): ?>
  8. <?php echo $headline; ?>
  9. <?php endif; ?>
  10. <?php endif; ?>
sidebar.phtml
  1. <?php if (true): ?>
  2. <?php if (!empty($search)): ?>
  3. <?php echo $search; ?>
  4. <?php endif; ?>
  5. <?php endif; ?>
  6. <?php if (false): ?>
  7. <?php if (!empty($title)): ?>
  8. <?php echo $title; ?>
  9. <?php endif; ?>
  10. <?php endif; ?>

The title of the page is displayed in the banner. The search input is displayed in the vertical bar at the right of the page.

Invert the placement of the search input and the title of the page by inverting the true and false conditions.

banner.phtml
  1. <?php if (false): ?>
  2. <?php if (!empty($search)): ?>
  3. <?php echo $search; ?>
  4. <?php endif; ?>
  5. <?php endif; ?>
  6. <?php if (true): ?>
  7. <?php if (!empty($headline)): ?>
  8. <?php echo $headline; ?>
  9. <?php endif; ?>
  10. <?php endif; ?>
sidebar.phtml
  1. <?php if (true): ?>
  2. <?php if (!empty($search)): ?>
  3. <?php echo $search; ?>
  4. <?php endif; ?>
  5. <?php endif; ?>
  6. <?php if (false): ?>
  7. <?php if (!empty($title)): ?>
  8. <?php echo $title; ?>
  9. <?php endif; ?>
  10. <?php endif; ?>

The search input is displayed in the banner. The title of the page is displayed in the vertical bar at the right of the page.

Edit the file actions/home.php.

  1.     $languages='home';
  2.     $contact=$account=$admin=$donate=true;
  3.     $edit=user_has_role('writer') ? url('editpage', $_SESSION['user']['locale']) . '/'. $root_node . '?' . 'clang=' . $lang : false;
  4.     $validate=url('home', $lang);
  5.  
  6.     $banner = build('banner', $lang, $with_toolbar ? compact('languages', 'contact', 'account', 'admin', 'donate') : compact('languages', 'contact', 'account', 'admin', 'donate', 'edit', 'validate'));
  7.     $toolbar = $with_toolbar ? build('toolbar', $lang, compact('edit', 'validate')) : false;
  8.  
  9.     $search_text='';
  10.     $search_url=url('search', $lang);
  11.     $suggest_url=url('suggest', $lang);
  12.     $search=view('searchinput', $lang, compact('search_url', 'search_text', 'suggest_url'));
  13.     $sidebar = view('sidebar', false, compact('search'));

Remove the option donate from the banner block. Move the search block from the sidebar block to the banner block. Remove the vertical bar on the right of the page:

  1.     $languages='home';
  2.     $contact=$account=$admin=true;
  3.     $search_text='';
  4.     $search_url=url('search', $lang);
  5.     $suggest_url=url('suggest', $lang);
  6.     $search=compact('search_url', 'search_text', 'suggest_url');
  7.     $edit=user_has_role('writer') ? url('editpage', $_SESSION['user']['locale']) . '/'. $root_node . '?' . 'clang=' . $lang : false;
  8.     $validate=url('home', $lang);
  9.  
  10.     $banner = build('banner', $lang, $with_toolbar ? compact('languages', 'contact', 'account', 'admin', 'search') : compact('languages', 'contact', 'account', 'admin', 'search', 'edit', 'validate'));
  11.     $toolbar = $with_toolbar ? build('toolbar', $lang, compact('edit', 'validate')) : false;
  12.  
  13.     $sidebar = false;
Git
  1. /izendsms.com
    1. actions
      1. home.php
    2. views
      1. banner.phtml
      2. sidebar.phtml

Commit this version:

$ git status
$ git add actions views
$ git commit -m'Shows $search in banner.phtml and $headline in sidebar.phtml'

Disconnect to display the home page.

Reconnect as administrator to display the widest control bar in the banner.

Press Ctrl+Shift+M to switch to adaptive view. Set the width of the display to 360px. The placement of the elements within the banner has been adjusted. The social media sharing bar is displayed at the bottom of the page.

IMPORTANT: The floating toolbar is not displayed. To access the editor on a small screen, set the $with_toolbar parameter to false in config.inc.

Gradually widen the screen. At 720px, the menu bar is misaligned.

Edit the file media.css in the folder css.

Set the parameter max-width to 800px in the rule @media screen and (max-width:720px) :

  1. @media screen and (max-width:800px) {
  2. #logo {float:none;width:100%;}
  3. #logo h1 a {width:100%;}
  4. #bannermenu {margin-left:0;}
  5. h3 {background:none;text-indent:0;}
  6. }
Git
  1. /izendsms.com
    1. css
      1. media.css

Commit this version:

$ git status
$ git add css/media.css
$ git commit -m'Folds banner when screen max-width:800px in media.css'

Client space

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].