Help building a login web page.

Discussion in 'Web Design and Development' started by FF112173, Sep 21, 2009.

  1. FF112173 macrumors newbie

    Joined:
    Sep 21, 2009
    #1
    I have built and maintained a website for my volunteer fire company. It's not the greatest site but I have gotten better over time. Recently I was asked if I could add a login page so the members could access forms and information we wish to keep relatively private. Simple stuff, no personal information. I have searched the net but only really found information and links for windows users. I am very new at this so if anyone could walk me through it I would greatly appreciate it. My site is designed in Dreamweaver 8 and is hosted on GoDaddy.com. Some of the things I am having issues with is how to build a database and how to link it all together.

    I am not opposed to purchasing any books that will walk you through this step by step either. I just learn more from doing then by reading. Thanks in advance.
     
  2. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #2
    It's good to hear you're using dreamweaver! It's really easy making a login page with dreamweaver!
    I should first know some things about the setup of your website to help you.
    Those things are:
    Is your website made in PHP or does your hosting support PHP?
    If so: Does your hosting support MySQL?

    That's wat i needed to know.
    If the answer on both of those questions is no, I can't help you.
    Then you would have to ask someone else, but I am confident you're hosting will support those things and then I will be able to help you. You won't need to know anything about PHP, I will guide you through the unknown of php ;)
     
  3. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #3
    Unless you want to get into server-side scripting, your best bet is to passwork protect a directory using a .htaccess file. Google for htaccess authentication.

    Here's one to get you started.
     
  4. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #4
    Easiest way to use a pre-built solution such as wordpress / blogger / etc.
     
  5. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #5
    Rupie94,

    The answer is yes and yes. Your help would be great. I have been beating my head off a rock trying to figure this out. I'm not opposed to taking classes, but my current health has me sort of home bound. Your help would really be appreciated.

    Also, for those interested the site is http://www.croydonfire.net. I am sure there are things that could have been done differently and some things better so anyone's opinion will be appreciated. I am truly interested in advancing in web design and this site will be my platform for learning.
     
  6. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #6
    So, making a 'member' section on a site consists out of five parts:
    1. Setting up the MySQL database with a username and a password.
    2. Connecting the site to the database.
    3. Making a login page.
    4. Lock the pages you want to keep from the open public.
    5. Making a logout page.

    1. Setting up the MySQL database with a username and a password.
    Open up PHP MyAdmin (that's the graphical MySQL database made with PHP). You will probably find it in the user section of your hosting.
    If you don't already have a database, add one under Create new database.
    Let's name it Login.
    Then you 'open' up the database by clicking on it in the left bar.
    You'll see a summary of your database. Under the summary you see a text field with Create new table on database ..., name it login and fill in 3 in number of fields.
    A new page opens up. You'll see al lot of text fields.
    There are 3 columns, and 10 rows.
    If there are 3 rows and 10 columns you swap the words in this explanation.

    Fill in these things:
    1st column, 1st row: id
    2nd column, 1st row: username
    3rd column, 1st row: password
    1st column, 2nd row: leave it as it is
    2nd column, 2nd row: select varchar
    3rd column, 2nd row: select varchar
    1st column, 3rd row: leave it as it is
    2nd column, 3rd row: 250
    3rd column, 3rd row: 32
    1st column, 9th row: check the checkbox

    Then click on save in the right bottom corner.

    You have just created the login table!
    Now you'll have to populate it with information.
    Click on the name of the table in the left bar.
    Click on insert in the tabs.
    First, you'll need to code the password for extra safety.
    Go to http://www.tech-faq.com/md5-generator.shtml fill in the prefered password click on generate md5 hash and copy the result.

    e.g. the md5 hash of password is: 5f4dcc3b5aa765d61d8327deb882cf99

    Fill in these things:
    leave id open
    fill in the preferred username in username
    fill in the md5 hash of your password

    click on go and you're done with the hardest part!

    2. Connecting the site to the database.
    Open up Dreamweaver.
    Click on site and then manage sites...
    Select the site and click on edit.
    Go through the setup wizard till the point where you can choose to use a server technology.
    Click on yes and select PHP MySQL.
    Keep on clicking on next till your done with the wizard and click on done in the site management.
    Your site is ready to connect to the database!
    Click on window and then on databases.
    A new window shows up. Click on the plus icon in the top left corner of the new window and select mysql connection.
    Fill in these thins:
    Name of connection: connLogin
    MySQL-server: localhost
    Username: the username of your MySQL server, look it up in the faq of your hosting or send an email to them if you don't know this
    Password: the password of your MySQL serer.
    Database: click on select and select the databse

    Then click on Ok.
    Your site is connected to the database!

    3. Making a login page.
    Add a new page in dreamweaver, call it login.php
    Add a form, this is the code:
    HTML:
    <form id="form1" name="form1" method="post" action="">
        <label>
          <input type="text" name="username" id="username" />
        </label>
      <br /><br />
        <label>
          <input type="text" name="password" id="password" />
        </label>
        <br />
        <label>
          <input type="submit" name="submit" id="submit" value="Submit" />
        </label>
    </form>
    Then click on the plus icon in the server behaviors palette.
    Click on User Authentication and the on Log In User.
    Fill in:
    Username field: select username
    Password field: select password
    validate using connection: select connLogin
    table: select login
    username column: select username
    password column: select password
    If login succeeds, go to: members.php
    If login fails, go to: check go to previous url (if it exists)
    Restrict access based on: Username and Password.

    Click on OK.

    No go to the code mode and scroll to the top of all the code.
    As you see, dreamweaver added a lot of php code in your page.
    You'll need to add these lines of code at the top of the page, before all the <?php tags.

    PHP:
    <?php
    if(isset($_POST['password'])) {
      
    $_POST['password'] = md5($_POST['password']);
    }
    ?>
    Save the file.

    The login page is done!

    4. Lock the pages you want to keep from the open public.
    Add a new file in dreamweaver, call it members.php.
    Click on the plus icon in the server behaviors palette and click on User Authentication and then on Restrict access to page.

    Fill in:
    Restrict based on: Username and password
    If acces denied, go to: login.php

    Click on OK, the members page is done!

    5. Making a logout page.
    Add some text to the members page like log out. (add it where you want the log out link to be)
    Select it and click on the plus icon in the server behaviors palette.
    Then click on User Authentication and then on Log out user.

    fill in:
    Log out when: link clicked
    When done, go to: your homepage

    The members section is done!
    If you want to add extra pages to the members section, just add a new page with .php at the end and add the Restrict access behavior with the given information!

    Please tell me if you didn't get something.
     
  7. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #7
    That is exactly what I was looking for. I can't wait to try it. I have read through it so hopefully I will be able to follow it. Thank you so much for taking the time to answer. :)
     
  8. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #8
    Oops, I made a mistake in the make login page section.
    I corrected it and made it bold
     
  9. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #9
    rupie94,

    I was following your directions and I hit a snag. When setting up the MySql database, you said "1st column, 2nd row: leave it as it is." I did that but it was preset to varchar and now it needs a number in the 3rd row before I can move forward. What do I need to do?
     
  10. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #10
    ok, what you should do is go to the table in the database by clicking on it in the left bar. Then you click on drop table or drop in the tab section. You then start over with creating the table with the exception to change varchar into INT in the 1 column, 2n row.
     
  11. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #11
    Okay, I followed everything and I didn't get anymore errors so I guess it has been set up correctly. Now I need to ask where to go from here? I made a button with the word login on it and added it to my index page. How do I link it to open the login page?
     
  12. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #12

    Is your godaddy site a shared site or is it private? IF it's private, the easiest way to do this is with apache simple authentication.
     
  13. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #13
    let the button link to login.php, so something like this
    <a href="login.php">members section</a>

    I ran into an other mistake I made.
    You should open the code editor and delete the code you added at the top of the page and replace it with this:
    <?php
    if(isset($_POST['password'])) {
    $_POST['password'] = md5($_POST['password']);
    }
    ?>

    Your login page won't give any errors anymore.
     
  14. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #14
    I made the changes and everything is liked together fine, however, i can't log in. It always send me to the error page I created. Here us the code from line 18 to 25;

    if (isset($_POST['username'])) {
    $loginUsername=$_POST['username'];
    $password=$_POST['password'];
    $MM_fldUserAuthorization = "";
    $MM_redirectLoginSuccess = "members_only.php";
    $MM_redirectLoginFailed = "loginfailed.html";
    $MM_redirecttoReferrer = true;
    mysql_select_db($database_connLogin, $connLogin);

    Any thoughts?
     
  15. jaikob macrumors 6502

    jaikob

    Joined:
    Jul 1, 2008
    Location:
    Freeland, MI
    #15
    Very incomplete code.

    Either your missing A LOT of stuff or you left out code you thought was unimportant.

    Looks like your using Dreamweaver.

    an $_SESSION['MM_Username'] needs to be set, and I have no idea why you have a mysql_select_db function at the bottom :confused:

    I'd try to explain it to you whats wrong, but I think you left out a lot of code. Please post your entire code, even the HTML so we can analyze it.
     
  16. rupie94 macrumors member

    Joined:
    Sep 5, 2008
    Location:
    Leiden
    #16
    You could try checking all the if the username field is called username and the password field password.
    If that won't work you could try to delete the code I gave you the last time. Do the code at the top and change the password in the database to the actual password instead of the encrypted one.
    If it wasn't encrypted in the first place, encrypt it like I said in the walkthrough and change it in the database. Then you won't have to delete the code at the top of the page.
     
  17. jaikob macrumors 6502

    jaikob

    Joined:
    Jul 1, 2008
    Location:
    Freeland, MI
    #17
    Assuming you have a field called "username" and a field called "password", and a database called "users" with a username and a password field. try using this code:

    login.php
    PHP:
    <?php
    // This code goes at the top of your login php page.
    if(isset($_POST['username'])) {
    // Connect to MySQL
    mysql_connect("localhost""DBUSERNAMEHERE""DBPASSWORDHERE") or die(mysql_error());
    mysql_select_db("DATABASENAMEHERE") or die(mysql_error());
    // Store variables, YOU MUST be storing passwords as MD5 in DB, its bad practice not to do so.
    $username $_POST['username'];
    $password md5($_POST['password']);
    $SuccessLoginPage "members_only.php";
    $FailedLoginPage "loginfailed.htm";
    // Query the DB:
    $query_login "SELECT * FROM users WHERE username = '".$username."' AND password = '".$password."'";
    $result_login mysql_query($query_login) or die(mysql_error());
    $row_login mysql_fetch_assoc($result_login);
    $row_login_Total mysql_num_rows($result_login);
    // Check if total rows = 1
    if($row_login_Total == 1) {
    $_SESSION['Username'] = $row_login['username'];
    $_SESSION['is_LoggedIn'] = TRUE;
    header("Location: ".$SuccessLoginPage);
    } else {
    header("Location: ".$FailedLoginPage);
    ?>
    Add your form code to login.php towards the bottom:
    Code:
    <form id="form1" name="form1" method="post" action="">
        <label>
          <input type="text" name="username" id="username" />
        </label>
      <br /><br />
        <label>
          <input type="text" name="password" id="password" />
        </label>
        <br />
        <label>
          <input type="submit" name="submit" id="submit" value="Submit" />
        </label>
    </form>
    
    And there ya go, add this to the top of all pages you want protected:

    PHP:
    <?php
    session_start
    ();
    // Check if we are logged in
    if($_SESSION['is_LoggedIn'] <> TRUE) { header("Location: loginfailed.html"); }
    ?>
    I believe godaddy uses Cpanel. In Cpanel there "should" be an option for phpmyadmin. Click it, and it will open a database tool for mysql. Create a database and fill it in the php code above. The capital letters tell you the info needed. DO NOT delete the quotes. After creating you DB, select it from the drop down on the left, and add a new table with 3 columns: id, username, password

    id should be set to (INT) Primary Key, Auto Increment. hover over the options to find what needs to be set.
    username should be TEXT
    password should be TEXT

    To add users' passwords as MD5, use phpmyadmin and add a new record (Insert tab at the top). Type the password into the correct field, and off to the left should be a drop down menu. Select MD5.

    I wrote this without checking it but I'm confident it wont error out on you :)
     
  18. FF112173 thread starter macrumors newbie

    Joined:
    Sep 21, 2009
    #18
    Thanks for all the help and ideas everyone. I will be trying it later on today. I will let you know how I make out. Thanks again.:)
     

Share This Page