Web Design "Mini Lesson" Thread

Hello Fellow ATSers.... I've been browsing the web design forums and have found that there is virtually nothing to help the newbies (save for a couple things)...

I made this thread for all the experts out there to give a little mini lesson as to how to do something neat in the world of web design.. By all means do not give up cherished trade secrets but instead maybe include a cool little do dad or wiz wam for the newbies or perhaps a couple small scripts to help the newbies learn how to script.

As I have opened this can of worms I figured that I would begin.

Basic PHP form Login Script

Now before I begin I suggest the reader has even a basic knowledge of PHP.. There are many good websites that offer tutorials. Here is a link to a good one W3schools PHP tutorial

This is a basic user login form with a cookie that will keep users logged in, authenticate them and allow them to log out. This does not have database user management.

Now let us begin

Start with a basic HTML form notice the php tags already in place.. we will get to them later.

note that I added space after < so that the code will display. Do not add space in finished code..

< ?php

?>

< html>
< head>
< title>My Login
< /head>
< body>

< form action="" method="post">
Username:< input name="username" type="text" />
Password:< input name="password" type="password" />
< input type="submit" />
< /form>

< /body>
< /html>

You can also use method = "get" but "post" is a bit more secure.

Now we go to the PHP.. We must define variables for the user name and password and since we used
method = "post" we use $_POST

< ?php
//remember we used method = 'post'//
$username = $_POST ['username'];
$password = $_POST ['password'];

?>

Now we set up an "if" statement.

< ?php
//remember we used method = 'post'//
$username = $_POST ['username'];
$password = $_POST ['password'];

if ($username == 'jim' and $password == '123')
[
echo 'Login Successful';

//and some welcome text//
echo 'Welcome' . $username;
]
else
[
echo '< span style="color: red"> Login Failed ';

//and some fail text//
echo $username . 'does not exist';
]
?>

Note that you do not have to use the < span> tag I just wanted to make the fail all pretty and red......

Now that we have the basics.. Let me show you how to set up a session..

What a session will do is assign the user an ID through a cookie from PHP's built in Session start.

< ?php

//start a session//

session_start();

$username = $_POST ['username'];
$password = $_POST ['password'];

if ($username == 'jim' and $password == '123')
[
echo 'Login Successful';
echo 'Welcome' . $username;
]
else
[
echo '< span style="color: red"> Login Failed ';
echo $username . 'does not exist';
]
?>

What this function does is stores a cookie on the user side giving the user a long id.. which on the server side holds all the info needed for the session.

Now you'll probably notice if you are testing this that "login failed" displays even if the user has not even attempted a login. So we will make another "if" statement with a function to fix this problem.

< ?php

session_start();

$username = $_POST ['username'];
$password = $_POST ['password'];

if (isset($_POST['username']))
[
if ($username == 'jim' and $password == '123')
[
echo 'Login Successful';
echo 'Welcome' . $username;
]
else
[
echo '< span style="color: red"> Login Failed ';
echo $username . 'does not exist';
]
]
?>

We use the isset function to determine whether 'username' is set and nest our previous 'if' statement within the new 'if' statement.

cont.. next reply...

Don't you hate when you post hit the "post" button prematurely by accident... I'm still editing my OP so bear with me..

reply to post by DaMod


If it's being covered try commenting it out by doing

this:
/*

^^that symbol comments it out.

Your code here.

*/

^^ends the commented section. It should keep it from parsing.

The board may also have a filter on it to disallow php no matter what you do.

reply to post by Evolutionsend


it seems to work if I add space after < tag..

So business as usual.. Doesn't seem to be screwing up my code..

15e.) Recruitment/Solicitation: i) You will not use your membership in the Websites for any type of recruitment to any causes whatsoever. You will not Post, use the chat feature, use videos, or use the private message system to disseminate advertisements, chain letters, petitions, pyramid schemes, or any kind of solicitation for political action, social action, letter campaigns, or related online and/or offline coordinated actions of any kind.

reply to post by roughycannon


I was thinking maybe this could be a thread teaching newbies how to "do it themselves" rather than learn how to buy other people's work...

Or is DIY no longer a good skill to have in web design...

reply to post by DaMod


The best way to learn is to read freely released code and learn how each piece works from www.php.net

Now after the user is authenticated we are going to set our $_SESSION..

< ?php

session_start();

$username = $_POST ['username'];
$password = $_POST ['password'];

if (isset($_POST['username']))
[
if ($username == 'jim' and $password == '123')
[

$_SESSION['username'] = $username;

echo 'Login Successful';
echo 'Welcome' . $username;
]
else
[
echo '< span style="color: red"> Login Failed ';
echo $username . 'does not exist';
]
]
?>

Now we are going to go back to our HTML tags and insert some PHP tags.. The Code goes as follows.. Since we have already covered this stuff I'm just going to display what the code should look like.

< html>
< head>
< title>My login< /title>
< /head>
< body>
< div>< /div>
< ?php if (isset($_SESSION['username'])) [ ?>
You are now logged in
< ?php ] else [ ?>
< form action="" method="post">
username:
password: < input name="password" type="password" />
< input type="submit" />

< ?php ] ?>
< /body>
< /html>

Now this may look confusing but basically our PHP code is intertwined with the HTML... for lack of a better word.. I know there is a better word, but I can't think of it right now...

I'll post the logout portion later.. Got stuffs to do

reply to post by Evolutionsend


Sure but... basically I explained step by step how to do this.. you won't get that looking at blocks of code... Perhaps this thread was a bad Idea... maybe I should just delete my contribution..

Not a bad idea but most newbie's just wanna get a page up, maybe a php login form isnt the best place to start as they wanna get a basic site first, probably best to start with some HTML like img src tags and text formatting...

Some people look at HTML and think "too complicated" but its really easy once you get the hang of it, I think most people would be surprised as to how quickly they could get a nice page with images and text up, most of the time when I code I copy and paste "img src" tag's code and edit the file name I think most people do this, people who dont program seem to think they have to type every line of code they dont know that most of it is copied, pasted and then edited...

reply to post by DaMod


I was making that suggestion to you, actually. Once your feet are wet those tutorials just slow you down.

reply to post by roughycannon


Well why don't you post something to that effect.. This is the mini lesson thread after all.. for everyone to post mini lessons

reply to post by DaMod


Dude sorry I'm not dissin your thread I think it s a great idea! start a new one with basic HTML and ill happily contribute, I'm sure theres tons of people out there that would love to do this

reply to post by DaMod


I tried to copy and paste one of my projects in here, but getting it to line up properly to make it readable proved too difficult.

< ?
require_once "common.php";
require_once "lib/http.php";

function hof_getmoduleinfo()[
$info = array(
"name"=>"Hall of fame, Extended",
"author"=>"Kate",
"version"=>"1.0",
"category"=>"Village",
"download"=>"Not released yet");
return $info;
]

function hof_install()[
module_addhook("village");
return true;
]

function hof_uninstall()[
return true;
]

function hof_dohook($hookname,$args)[
//global $session;
addnav("Hall of Fame","runmodule.php?module=hof&op=enter");
return $args;
]

function hof_run()[

page_header("The Hall of Fame!");
switch($_GET['op'])[
case"enter":
output("`9`b`cHeroes of the land`c`b");
$title = array("1"=>"Name","2"=>"Dragonkills","3"=>"Level","4"=>"Days");
$data = array("1"=>"name","2"=>"dragonkills","3"=>"level","4"=>"dragonage");
break;
case"dragonkills":
output("`9`b`cDragon Slayers of the land`c`b");
$title = array("1"=>"Name","2"=>"Dragonkills","3"=>"Level","4"=>"Days");
$data = array("1"=>"name","2"=>"dragonkills","3"=>"level","4"=>"dragonage");
break;
case"gems":
output("`9`b`cRichest of the land`c`b");
$title = array("1"=>"Name","2"=>"Gems","3"=>"Level","4"=>"Dragon Kills");
$data = array("1"=>"name","2"=>"gems","3"=>"level","4"=>"dragonkills");
break;
case"attack":
output("`9`b`cStrongest of the land`c`b");
$title = array("1"=>"Name","2"=>"Attack","3"=>"Level","4"=>"Dragon Kills");
$data = array("1"=>"name","2"=>"attack","3"=>"level","4"=>"dragonkills");
break;
case"defence":
output("`9`b`cToughest of the land`c`b");
$title = array("1"=>"Name","2"=>"Defense","3"=>"Level","4"=>"Dragon kills");
$data = array("1"=>"name","2"=>"defence","3"=>"level","4"=>"dragonkills");
break;
case"hitpoints":
output("`9`b`cHealthiest of the land`b`c");
$title = array("1"=>"Name","2"=>"Hitpoints","3"=>"Level","4"=>"Dragon kills");
$data = array("1"=>"name","2"=>"maxhitpoints","3"=>"level","4"=>"dragonkills");
break;
case"smithlevel":
output("`9`b`cSmiths of the land`c`b");
$title = array("1"=>"Name","2"=>"Smithing Level","3"=>"Level","4"=>"Dragon kills");
$data = array("1"=>"name","2"=>"smithlevel","3"=>"level","4"=>"dragonkills");
break;
case"charm":
output("`9`b`cHottest of the land`c`b");
$title = array("1"=>"Name","2"=>"Charm","3"=>"Level","4"=>"Dragon kills");
$data = array("1"=>"name","2"=>"charm","3"=>"level","4"=>"dragonkills");
break;
]
$data1=$data[1];
$data2=$data[2];
$data3=$data[3];
$data4=$data[4];
$sql = 'SELECT '.$data1.','.$data2.','.$data3.','.$data4.' FROM accounts WHERE '.$data2.'>0 ORDER BY '.$data2.' DESC LIMIT 0, 20 ';
$result = db_query($sql) or die(db_error(LINK));
$countrow = db_num_rows($result);
output("< center >< table cellspacing=2 cellpadding=2 width=400 >< tr >< td >< b >$title[1]< /b >< /td > < td >< b >$title[2]< /b >< /td > < td >< b >$title[3]< /b >< /td > < td >< b >$title[4]< /b >< /td >< /tr >",true);
if (db_num_rows($result)==0)[
output("< tr >< td colspan=4 >`&$zero< /td >< /tr >",true);
]
for($i=0; $i < $countrow; $i++) [
$row = db_fetch_assoc($result);
output("< tr class='trdark' >< td >$row[$data1]< /td > < td >$row[$data2]< /td > < td >$row[$data3]< /td > < td >$row[$data4]< /td >< /tr >",true);
]
output("< /table >< /center >",true);
addnav("Navigation");
addnav("return","village.php");
addnav("options");
addnav("Dragonkills","hof.php?op=dragonkills");
addnav("Gems","hof.php?op=gems");
addnav("Strongest","hof.php?op=attack");
addnav("Toughest","hof.php?op=defence");
addnav("Healthiest","hof.php?op=hitpoints");
addnav("Smithing Level","hof.php?op=smithlevel");
addnav("Hottest","hof.php?op=charm");
page_footer();
]
? >

_____________________________^^code^^________________________________________

Finally got it to align almost properly. This is a little "module" that I wrote for my friends gaming site. You are confined by certain copyright rules, so it's a bit more complicated than it needs to be. What this does, is provide a ranking list for players, that can order them according to many different credentials, much like the ATS members list that can be sorted by various options. Per the copyright rules it's completely plug and play for anyone using the software.

Btw, that software uses a template engine, and does not require as much back and forth html/php stuff.

Here is the code for the logout.. A few things though.. You'll notice a function called htmlentities() basically the purpose of that is to prevent code from being injected.

< ?php
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', True);

session_start();

if (isset($_GET['logout']))
[
$_SESSION = array();
if ($_COOKIE[session_name()])
[
setcookie(session_name(), '', time()-42000, '/');
]
session_destroy();
header('Location: test3.php');
]

if (isset($_POST['username']))
[
$username = htmlentities($_POST['username']);
$password = htmlentities($_POST['password']);

if ($username == 'jim' and $password == '123')
[
$_SESSION['username'] = $username;
echo 'Login Successful';
echo 'Welcome, ' . $username;
]
else
[
echo 'Login Failed';
echo $username . ', does not exsit';
]
]
?>

< html>
< head>
< title>My login< /title>
< /head>
< body>
< div>< /div>
< ?php if (isset($_SESSION['username'])) [ ?>
You are now logged in
< a href="test3.php?logout=1">Logout
< ?php ] else [ ?>
< form action="" method="post">
username: < input name="username" type="text" />
password: < input name="password" type="password" />
< nput type="submit" />
< /form>
< ?php ] ?>
< /body>
< /html>

This is probably a stupid question.

But is there a place online that one can experiment with different lines of codes to see what the results are without having to buy an application? Sort of a online preview site (perhaps).

Anyway, I do appreciate someone stepping forward and trying to teach us newbies.
So thanks for that.

reply to post by Wingz


Sorry for the bump...

To answer you if there is anywhere on the web you can try out code, there are a few options:

1. Set up your own hosted site on one of the many free hosting companies. (or pay for one)
   
2. Set up an WAMP stack on your own computer / network (or LAMP if you have a linux box spare).
   
3. Use someones "try code onlie" sandbox (such as: writecodeonline.com...)
   

Originally posted by DaMod

... maybe include a cool little do dad or wiz wam ...

I seriously hope you do not use this language in a professional environment, if one of my devs or macmonkeys said that, they would be looking for a new job by the end of the day. But then again I am quick to anger when it comes to newbies... "GET OFF MY LAWN" is now a meme with the Australian Web Industry Association. But thanks for starting this thread, there are a few people here who have sites, so its good to support them.

Originally posted by cartenz
reply to post by Wingz

 

I seriously hope you do not use this language in a professional environment, if one of my devs or macmonkeys said that, they would be looking for a new job by the end of the day. But then again I am quick to anger when it comes to newbies... "GET OFF MY LAWN" is now a meme with the Australian Web Industry Association. But thanks for starting this thread, there are a few people here who have sites, so its good to support them.

No I don't.. But this is ATS... I would consider ATS to be a more informal environment wouldn't you?

Originally posted by cartenz
"GET OFF MY LAWN"

I guess this explains alot whenever ive dealt with aussies and that expression...lool , Perhaps thats why i have little lawn to grow and i guess its why my rottie's are always on...how do we say...on edge :-)

offtopic, the only head f**k i ever get is when i need to travel, as the dogs don't accept food from others so i needed to teach the dogs again to trust one more person so as they can be fed whenever i travel.