Tutorials: Selling ID's and Passwords

This tutorial will cover the minimum of how to password protect certain areas of a site using Zencil. Hopefully from these basics you will be able to extrapolate and build more complex websites.  This site will have only one template that includes...

  • One navigation module.
  • One text area.
  • One password protection module. 

Sample Files

  1. Download this design.
  2. Extract the files from the ZIP.
  3. Re-name "template.html". Call it "Store_Page.html".

Inserting the Functionality

The Navigation

  1. Open both of the HTML files in DreamWeaver.
  2. Place the blinking cursor in the light blue strip just below the strange logo (actually the Zencil Web Solutions Corporation logo).
  3. In the Zencil toolbar click the navigation icon.
     
  4. Choose the drop down menu system.
  5. The wizard window in Figure I will appear.
    • In the left-hand column, set "BG Color" to none.
    • Click "OK".  Now your work should match Figure II.
  6. Save 2 copies of this file.
    • text_page.html
    • login_page.html

The Content

  1. Open text_page.html in DreamWeaver.
  2. Place the blinking cursor in the large white portion of the page.
  3. In the Zencil toolbar click the  dynamic text icon.
     

The Password Protection

  1. Open login_page.html in DreamWeaver.
  2. Place the blinking cursor in the large white portion of the page.
  3. In the Zencil toolbar click the members icon.

Getting the Password System Online

At this point your online store is ready to be activated.  If you are not yet familiar with the process of activating a website you can follow these instructions.  The home page of your website should look like figure III.

  1. Get the site started: Create 3 top level links within the main navigation via the CMS functionality.
    • Basic Information
    • Advanced Information
    • Login
  2. Make a few text pages within the "Basic Info" section by adding links to the drop-down system.
  3. Make a few text pages within the "Advanced Info" section by adding links to the drop-down system.
  4. Be sure to follow all the links you created in steps 2 & 3 and attach these links to the text page template.
  5. For the login section - do not add multiple pages.  Instead, connect that top level link to the login page template.
  6. Protect some of the pages: Go to the login page and click "Membership Options".
  7. Click on the "settings" tab and follow the instructions.  Be sure to save.
  8. Click on the "packages" tab and create 2 membership types by following the instructions. 
    • Basic $10 & Advanced $20
  9. Your two sections will now be protected from public access.

Note: To test this system and the password protection must be logged out of Zencil.  If you are logged in, you will be pushed past the logins so that you can edit the content more easily.

Expanding the Site

  • You can create new sections in the navigation and new membership packages at any time.
  • You are not limited to protecting text.  You may protect any set of pages no matter what CMS features are on it.  For example you may want to protect a photo album.

Code Sample

  • This is only the code for the password protection system.  You can get code samples for other modules via the "DreamWeaver Toolbar Info" menu.
<zencil module="members_login" name="members1">
  <table border="0" cellpadding="2" cellspacing="2">
    <tr>
      <td colspan="2"><span class="style2">Email Address </span><br />
          <input name="member_email" type="text" id="member_email" /></td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">Password</span><br />
          <input name="member_pass" type="password" id="member_pass" /></td>
    </tr>
    <tr>
      <td><input name="Register" type="button" id="Register" value="Register" /></td>
      <td align="right"><input type="submit" name="Submit" value="Login" /></td>
      <input name="submitted" id="submitted" type="hidden" value="1" />
    </tr>
    <tr>
      <td colspan="2" align='center'><span style='font-size: small;' class='forgotpw'><a href="#">Forgot your password?</a></span></td>
    </tr>
  </table>
</zencil>
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada