Creating Login To Your Web Site

Open Discussion » CONTRIBUTE » The Internet » Web Design

Creating Login To Your Web Site

Options

malish

Super Member

Group: Members
Posts: 213
Joined: 13-July 05
Member No.: 9,394

Post #1 post

Aug 29 2005, 10:45 PM

I am really interested in creating the login for my web site. I have no experience in data base building but if some one has good tutorials about how to create the database and setup everything for the login, please post the information in here. Specifically I'm interested in setaild description of HOW TO CREATE A DATABSE, HOW TO CONNECTED TO YOUR web hosting, WHICH SPECIFIC PROGRAMS you need to make it and other usefull info regarding the setup.

Thank you very much

biscuitrat View Member Profile Kween of Everything :) Group: Members Posts: 1,052 Joined: 16-October 04 From: Houston, Tejas :D Member No.: 1,774	Post #2 Aug 29 2005, 10:55 PM I used PUMA. It's a really easy to use PHP script and it works pretty well. It may be simple, but you don't need all that much for your users, do you?

littleweseth

Member [Level 2]

Group: Members
Posts: 85
Joined: 27-August 05
From: QLD, Aus. G'day!
Member No.: 11,186

Post #3 post

Aug 30 2005, 08:31 AM

HOW TO CREATE A DATABASE : USING PHPmyADMIN. You should be able to find it in cPanel somewhere, and it's all very straightforward (certainly more so than hacking away at the command line.)
HOW TO CONNECTED TO YOUR WEB HOSTING : using stuff™. Be a little more specific - how to stop users getting to stuff unless they're logged in, how to use PHP?
WHICH SPECIFIC PROGRAMS : well notepad works fine

Seriously though, all you need is PHP, mySQL and some PHP scripts, which you can either write yourself (not reccomended unless you LIKE being hacked) or find somewhere else.

[ As always, i recommend you look at www.hudzilla.org/phpbook for great justice. ]

Making a login script isn't really that hard. At simplest, all you need is a three column database : 'username' (unique, Primary Key), 'userpass' (a 40-char field to store a SHA-1 hash of the password in) and 'loggedin', a bool you flick when the user logs in. Then all you need is a form that the user can type their name and pass into. However, do not do this - there's so many security holes in a login script this simple that you might as well get hackmenow.trap17.com.

(for this reason, i recommend you don't roll your own login script until you're good with PHP, and understand things like SQL injections and the importance of never trusting user input.)

[whoa : gotta do some study for my exams tommorow now. Chemistry and Anicent history are so fun i could vomit... ]

rantsh

Newbie

Group: Members
Posts: 7
Joined: 2-September 05
Member No.: 11,413

Post #4 post

Sep 2 2005, 08:14 AM

I recommend that you chech MySQL's website and look for the documentation, since this is probably the database management software that you're going to be using, then your login screen also depends on which language you're using to develop the software. I tend to combine the use of php with MySQL which is one of the most usual combos.

Now, unless you're actually writing your website straight into the server (which I personally wouldn't recommend), I'd suggest for you to use foxserv or Abriasoft's Merlin to configure an offline webserver on your PC, anyone of this softwares will install at least Apache, mysql, php and phpmyadmin. Now, phpmyadmin is a software that will allow you to manage your mysql database, through a web-based interfase with very ease. The best thing about this kind of bundles is that they auto-configure all the services that you require.

If you don't want to use php, then you might want to think about writing scripts with PERL or CGI, since you're new (not that I'm a complete pro... yet) I recommend php since it's very simple and the syntax is very C-Like... I tell you, I used it on my bachelor of computer science thesis and it worked perfectly.

By the way, depending on the type of information you are making exclusive, you might want to encrypt your database, even if the actual code is on the server side (which I prefer).

Finally, if you're not very familiar with databases you may want to pick-up a book about database design, because (although I admit I hate databases) I admit that using databases on the proper way (efficiently and effectively) may transform your website into an awesome place, creating custom pages for your pages dinamically and such things. Or you may even save yourself from having to write saveral pages with same charateristics and just write templates so you can fill them in dinamically. MySQL (or any other way of database management) is a great way to make your site escalable and even profitable.

On the "how to connect to your hosting service"... well, you'll need to be a little more specific, yet, I'm guessing you want to FTP your pages, and update your site. Then you'll have to use some FTP client (like CuteFTP, or WS_FTP). You can connect through SSH or Telnet (if your ISP allows these kind of connections), you can use PuTTY for this. You may even choose to be your own host using one of the softwares I mentioned above and then, either get a fixed ip and a domain name, or use a Dynamic DNS service, which for individuals is usually free.

I Hope I make sense, and that this info helps you. If you have any Q's you can send me a PM and I'll reply as soon as I can...

Abriasoft's Official Site
Foxserv@Sourceforge.net
Dyanmic DNS infomation
PuTTY's Website

TPFWebmaster

Newbie [Level 1]

Group: Members
Posts: 13
Joined: 15-September 05
Member No.: 11,892

Post #5 post

Sep 26 2005, 08:07 AM

You can use Javascript to create logins for certain pages, such as member pages, while leaving others open-to-all. only thing is that a moderately experienced hacker can get all usernames and passwords.

Use the following script and save in an external document:

CODE

/*
-------------------------------------------------------------------

INSTRUCTIONS - Read Before Using Script

If you are using frames, the code referred to in steps 2 - 5 must be put in the
pages displayed in the frames and NOT in the parent document.

Step 1
In the Usernames & Passwords section, configure the variables as
indicated by the comments.

Step 2:
Add the following code to the <head> section of your login page:
<script src="scripts/login.js"></script>
Change "scripts/login.js" to reflect the correct path to this script
file on your server.

Step 3:
Add this code to the login page, at the place you want the login
panel to show:

<script language="JavaScript">
BuildPanel();
</script>

Step 4:
Add the following code to the <head> section of each page procteded
by this script:

<script src="scripts/login.js"></script>
<script language="JavaScript">
checkCookie();
</script>

Change "scripts/login.js" to reflect the correct path to the script
file on your server.

Step 5:
On the page that is to have the logout button, paste this code where you
want the button to be:

<form action="" name="frmLogoff">
<input type="button" name="btLogoff" value="log out" onclick="logout();">
</form>

To use your own image instead of the grey button change the type from button to image
and add src="myimage.gif" where myimage.gif is the image (including the path to it if
needed, you want to use.

Step 6:
Upload this script and your html pages to the relevant directories
on your server.

*/

//----------------------------------------------------------------
// Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "test.html"; // The page users go to after login, if they have no personal page.
var loginpage = "logintest.html"; //Change this to the page the login panel is on.

var imgSubmit = ""; //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = ""; //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("username1","password1","member1.html");
// Change these two entries to valid logins.
users[1] = new Array("username2","password2","member2.html");
// Add addtional logins, straight after these, as
// required, followig the same format. Increment the
// numbers in the square brackets, in new each one. Note:
// the 3rd parameter is the the page that user goes to
// after successful login. Ensure the paths are correct.
// Make this "" if user has no personal page.

//----------------------------------------------------------------
// Login Functions
//----------------------------------------------------------------
function login(username,password){
var member = null;
var loggedin = 0;
var members = users.length;
for(x=0;x<members && !loggedin; x++){
if((username==users[x][0])&&(password==users[x][1])){
loggedin = 1;
member = x;
break;
}
}

if(loggedin==1){
if(users[member][2] != "") {
successpage = users[member][2];
}
setCookie("login",1);
if (top.location.href != location.href){
location.href = successpage;
}else{
top.location.href = successpage;
}
}else{
alert('access denied'); // Insert a fail message.
}
}

function logout() {
deleteCookie("login");
if (top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) {
if (value != null && value != "")
document.cookie=name + "=" + escape(value) + ";";
ckTemp = document.cookie;
}

function deleteCookie(name) {
if (getCookie(name)) {
document.cookie = name + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

function getCookie(name) {
var index = ckTemp.indexOf(name + "=");
if(index == -1) return null;
index = ckTemp.indexOf("=", index) + 1;
var endstr = ckTemp.indexOf(";", index);
if (endstr == -1) endstr = ckTemp.length;
return unescape(ckTemp.substring(index, endstr));
}

function checkCookie() {
var temp = getCookie("login");
if(!temp==1) {
alert('access denied'); // Rensert a fail message.
if(top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write('<small><font face="Verdana">Username:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="text" name="username" size="20"></font></small></td></tr>');
document.write('<tr><td align="right"><small><font face="Verdana">Password:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="password" name="password" size="20"></font></small></td></tr>');
if(imgSubmit == ""){
document.write('<tr><td align="center" colspan="2"><p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">');
} else {
document.write('<tr><td align="center" colspan="2"><p><input type="image" src="'+imgSubmit+'" name="Logon" onclick="login(username.value,password.value)">');
}
if(imgReset == ""){
document.write('<input type="reset" value="Reset" name="Reset">');
} else {
document.write('<input type="image" src="'+imgReset+'" name="Reset" onclick="logon.reset();">');
}
document.write('</p></td></tr></table></form>');
}

you will be required to modify a few attributes but it is all clearly mentioned.
Implement step 4 in all protected pages.

michaelds

Newbie [Level 2]

Group: Members
Posts: 25
Joined: 27-September 05
Member No.: 12,300

Post #6 post

Sep 29 2005, 10:58 AM

QUOTE(malish @ Aug 29 2005, 11:45 PM)

how do you do this than? you say you found some really good tutorials so where did you found them? please give me an adress where i can find these tutorials! and by the way why are you creating these logins on your website? what kind of wesite are you making? if it has somthing to do wih bringingin news i can underastans but... Hey let me know what your site intenssions are and then maybe you can help me out with the login overall proces? and i want to know where your site is about! well let me know ok?

see ya!!!!

wow View Member Profile Member [Level 1] Group: Members Posts: 58 Joined: 22-October 05 Member No.: 13,216	Post #7 Nov 1 2005, 02:32 PM Speaking of sql injection.How is that done?Can you post a tutorial on it?Not that I want to do it ,but as you say to beware,and how to write a script that makes it hard pressed for who ever to do this.

anarchyboard88

Member [Level 1]

Group: Members
Posts: 52
Joined: 10-November 05
Member No.: 14,045

Post #8 post

Nov 12 2005, 07:15 PM

QUOTE(TPFWebmaster @ Sep 26 2005, 03:07 AM)

CODE

/*
-------------------------------------------------------------------

INSTRUCTIONS - Read Before Using Script

If you are using frames, the code referred to in steps 2 - 5 must be put in the
pages displayed in the frames and NOT in the parent document.

Step 1
In the Usernames & Passwords section, configure the variables as
indicated by the comments.

Step 2:
Add the following code to the <head> section of your login page:
<script src="scripts/login.js"></script>
Change "scripts/login.js" to reflect the correct path to this script
file on your server.

Step 3:
Add this code to the login page, at the place you want the login
panel to show:

<script language="JavaScript">
BuildPanel();
</script>

Step 4:
Add the following code to the <head> section of each page procteded
by this script:

<script src="scripts/login.js"></script>
<script language="JavaScript">
checkCookie();
</script>

Change "scripts/login.js" to reflect the correct path to the script
file on your server.

Step 5:
On the page that is to have the logout button, paste this code where you
want the button to be:

<form action="" name="frmLogoff">
<input type="button" name="btLogoff" value="log out" onclick="logout();">
</form>

To use your own image instead of the grey button change the type from button to image
and add src="myimage.gif" where myimage.gif is the image (including the path to it if
needed, you want to use.

Step 6:
Upload this script and your html pages to the relevant directories
on your server.
*/

//----------------------------------------------------------------
// Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "test.html"; // The page users go to after login, if they have no personal page.
var loginpage = "logintest.html"; //Change this to the page the login panel is on.

var imgSubmit = ""; //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = ""; //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("username1","password1","member1.html");
// Change these two entries to valid logins.
users[1] = new Array("username2","password2","member2.html");
// Add addtional logins, straight after these, as
// required, followig the same format. Increment the
// numbers in the square brackets, in new each one. Note:
// the 3rd parameter is the the page that user goes to
// after successful login. Ensure the paths are correct.
// Make this "" if user has no personal page.
//----------------------------------------------------------------
// Login Functions
//----------------------------------------------------------------
function login(username,password){
var member = null;
var loggedin = 0;
var members = users.length;
for(x=0;x<members && !loggedin; x++){
if((username==users[x][0])&&(password==users[x][1])){
loggedin = 1;
member = x;
break;
}
}

if(loggedin==1){
if(users[member][2] != "") {
successpage = users[member][2];
}
setCookie("login",1);
if (top.location.href != location.href){
location.href = successpage;
}else{
top.location.href = successpage;
}
}else{
alert('access denied'); // Insert a fail message.
}
}

function logout() {
deleteCookie("login");
if (top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) {
if (value != null && value != "")
document.cookie=name + "=" + escape(value) + ";";
ckTemp = document.cookie;
}

function deleteCookie(name) {
if (getCookie(name)) {
document.cookie = name + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

function getCookie(name) {
var index = ckTemp.indexOf(name + "=");
if(index == -1) return null;
index = ckTemp.indexOf("=", index) + 1;
var endstr = ckTemp.indexOf(";", index);
if (endstr == -1) endstr = ckTemp.length;
return unescape(ckTemp.substring(index, endstr));
}

function checkCookie() {
var temp = getCookie("login");
if(!temp==1) {
alert('access denied'); // Rensert a fail message.
if(top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write('<small><font face="Verdana">Username:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="text" name="username" size="20"></font></small></td></tr>');
document.write('<tr><td align="right"><small><font face="Verdana">Password:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="password" name="password" size="20"></font></small></td></tr>');
if(imgSubmit == ""){
document.write('<tr><td align="center" colspan="2"><p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">');
} else {
document.write('<tr><td align="center" colspan="2"><p><input type="image" src="'+imgSubmit+'" name="Logon" onclick="login(username.value,password.value)">');
}
if(imgReset == ""){
document.write('<input type="reset" value="Reset" name="Reset">');
} else {
document.write('<input type="image" src="'+imgReset+'" name="Reset" onclick="logon.reset();">');
}
document.write('</p></td></tr></table></form>');
}

you will be required to modify a few attributes but it is all clearly mentioned.
Implement step 4 in all protected pages.
[right][snapback]189452[/snapback][/right]

hey, thnx alot. ive been looking for a way to create membership logins. sql is quite confusing to me tho. i love the trap17's webhosting interface, its very easy to navigate, im just not that experienced with sql, just html.

zach101

Premium Member

Group: Members
Posts: 178
Joined: 26-June 05
Member No.: 8,699

Post #9 post

Nov 12 2005, 10:18 PM

Hmm im also interested in geting login for my site. Now i read the replies but i dont know any php or anything like that so got kinda lost. Now let me tell you what i want and you can tell me the best way to do it.

Okay I would like to build a site for my starcraft gaming team. I want it to have the basic stuff you know the news when u bring it up and a membership roster as well as replays and what not. However i also want to have it that a member can login and view persoanl information as well as update there stats, Look at private news among other things. So is there a template some where i could just dl? I saw that long bunch of javascript up there but can some one pelase explain that to me? KInda new to website building. Thanks in advance

XRated

Member [Level 1]

Group: Members
Posts: 73
Joined: 10-November 05
Member No.: 14,067

Post #10 post

Nov 14 2005, 02:23 AM

QUOTE(TPFWebmaster @ Sep 26 2005, 03:07 AM)

CODE

/*
-------------------------------------------------------------------

INSTRUCTIONS - Read Before Using Script

If you are using frames, the code referred to in steps 2 - 5 must be put in the
pages displayed in the frames and NOT in the parent document.

Step 1
In the Usernames & Passwords section, configure the variables as
indicated by the comments.

Step 2:
Add the following code to the <head> section of your login page:
<script src="scripts/login.js"></script>
Change "scripts/login.js" to reflect the correct path to this script
file on your server.

Step 3:
Add this code to the login page, at the place you want the login
panel to show:

<script language="JavaScript">
BuildPanel();
</script>

Step 4:
Add the following code to the <head> section of each page procteded
by this script:

<script src="scripts/login.js"></script>
<script language="JavaScript">
checkCookie();
</script>

Change "scripts/login.js" to reflect the correct path to the script
file on your server.

Step 5:
On the page that is to have the logout button, paste this code where you
want the button to be:

<form action="" name="frmLogoff">
<input type="button" name="btLogoff" value="log out" onclick="logout();">
</form>

To use your own image instead of the grey button change the type from button to image
and add src="myimage.gif" where myimage.gif is the image (including the path to it if
needed, you want to use.

Step 6:
Upload this script and your html pages to the relevant directories
on your server.
*/

//----------------------------------------------------------------
// Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "test.html"; // The page users go to after login, if they have no personal page.
var loginpage = "logintest.html"; //Change this to the page the login panel is on.

var imgSubmit = ""; //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = ""; //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("username1","password1","member1.html");
// Change these two entries to valid logins.
users[1] = new Array("username2","password2","member2.html");
// Add addtional logins, straight after these, as
// required, followig the same format. Increment the
// numbers in the square brackets, in new each one. Note:
// the 3rd parameter is the the page that user goes to
// after successful login. Ensure the paths are correct.
// Make this "" if user has no personal page.
//----------------------------------------------------------------
// Login Functions
//----------------------------------------------------------------
function login(username,password){
var member = null;
var loggedin = 0;
var members = users.length;
for(x=0;x<members && !loggedin; x++){
if((username==users[x][0])&&(password==users[x][1])){
loggedin = 1;
member = x;
break;
}
}

if(loggedin==1){
if(users[member][2] != "") {
successpage = users[member][2];
}
setCookie("login",1);
if (top.location.href != location.href){
location.href = successpage;
}else{
top.location.href = successpage;
}
}else{
alert('access denied'); // Insert a fail message.
}
}

function logout() {
deleteCookie("login");
if (top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) {
if (value != null && value != "")
document.cookie=name + "=" + escape(value) + ";";
ckTemp = document.cookie;
}

function deleteCookie(name) {
if (getCookie(name)) {
document.cookie = name + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

function getCookie(name) {
var index = ckTemp.indexOf(name + "=");
if(index == -1) return null;
index = ckTemp.indexOf("=", index) + 1;
var endstr = ckTemp.indexOf(";", index);
if (endstr == -1) endstr = ckTemp.length;
return unescape(ckTemp.substring(index, endstr));
}

function checkCookie() {
var temp = getCookie("login");
if(!temp==1) {
alert('access denied'); // Rensert a fail message.
if(top.location.href != location.href){
location.href = loginpage;
}else{
top.location.href = loginpage;
}
}
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write('<small><font face="Verdana">Username:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="text" name="username" size="20"></font></small></td></tr>');
document.write('<tr><td align="right"><small><font face="Verdana">Password:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="password" name="password" size="20"></font></small></td></tr>');
if(imgSubmit == ""){
document.write('<tr><td align="center" colspan="2"><p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">');
} else {
document.write('<tr><td align="center" colspan="2"><p><input type="image" src="'+imgSubmit+'" name="Logon" onclick="login(username.value,password.value)">');
}
if(imgReset == ""){
document.write('<input type="reset" value="Reset" name="Reset">');
} else {
document.write('<input type="image" src="'+imgReset+'" name="Reset" onclick="logon.reset();">');
}
document.write('</p></td></tr></table></form>');
}

you will be required to modify a few attributes but it is all clearly mentioned.
Implement step 4 in all protected pages.
[right][snapback]189452[/snapback][/right]

Hmm so much work for such a simple task , using php in my opinion would be the most effective and
very safe . I could make a system that uses php + mysql , you would have to add small code to every page you made that y