WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Login page

View previous topic View next topic Go down  Message [Page 1 of 1]

1Login page Empty Login page Wed May 23, 2012 1:23 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Hi guys.

I am back to ask for more help xD

RockerMan has made an awesome login page, and has taken a screenshot of it. I want to make one similar, so I am handing over to the people of WebArtz for some help. What coding would be required to make a login like this?

Login page Log-in10

2Login page Empty Re: Login page Wed May 23, 2012 1:55 am

RockerMan

RockerMan
Technician
Technician
HTML & CSS Smile

If you want it to actually function you will need PHP and a Database to read from.

Or, if your using it for Forumotion there is a way to do it.

http://www.graphics-post.com/

3Login page Empty Re: Login page Wed May 23, 2012 2:01 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Could you give me a hand please rocker?

4Login page Empty Re: Login page Wed May 23, 2012 2:06 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Tomorrow I will make you another one Smile

5Login page Empty Re: Login page Wed May 23, 2012 2:11 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
OK. Thanks Joker. Should I get this thread closed?

6Login page Empty Re: Login page Wed May 23, 2012 2:31 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
No, I will post it here.

7Login page Empty Re: Login page Wed May 23, 2012 6:00 am

RockerMan

RockerMan
Technician
Technician
The majority of it is just HTML and CSS, like this:

Code:
<!doctype html>

<head>
   <title>Login Page</title>
   <link rel="stylesheet" type="text/css" href="#" />
</head>

<body>
   <div id="loginWrapper">
      <h3>Register or Login</h3>
      <span class="label">Username:</span>
      <input type="text" class="loginInp" /><
      <span class="label">Password:</span>
      <input type="password" class="loginInp" />
      
      <div class="buttons">
         <a class="button" href="#">Log-In</a>
         <a class="botton" href="#">Register</a>
      </div><!-- end .buttons -->
   </div><!-- end #loginWrapper -->
</body>

Then you just have to style it Smile

Code:
/*****  Reset  ******/
* { margin: 0; padding: 0; }

/******  Main Styles  ******/
body {
   background: url('../img/background.png');
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 12px;   
}

#loginWrapper {
   background: #fff;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   border: 1px solid #c8c8c8;
   padding: 20px;
   margin: 50px auto 20px auto;
   width: 550px;   
}

.label {
   color: #666;
   display: block;   
}

.loginInp {
   padding: 5px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   color: #999;
   border: 1px solid #CCC;
   outline: none;
   margin-bottom: 10px;
}

.buttons {
   margin-top: 20px;   
}

.buttons a {
   color: #fff;
   text-decoration: none;
}

.button {
   padding: 5px 10px;
   background: #286dca;
   border: 1px solid #2362b7;
   -moz-border-radius:4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
}

and you should have something like this:
http://screensnapr.com/v/xoGPEi.jpg

http://www.graphics-post.com/

8Login page Empty Re: Login page Wed May 23, 2012 1:19 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Well I now have my login page. But a) How can they register? and b) I need help with the PHP coding for putting it online.

Login page Itworked



Last edited by RSguideMaker on Wed May 23, 2012 1:37 pm; edited 1 time in total

9Login page Empty Re: Login page Wed May 23, 2012 1:35 pm

ankillien

ankillien
Administrator
Administrator
RSguideMaker wrote:Well I now have my login page. But a) How can they register? and b) I need help with the PHP coding for putting it online.

Have you created the registration page?

Its a long and difficult process to create a user registration and login system. You need to have good knowledge of PHP and database.

10Login page Empty Re: Login page Wed May 23, 2012 1:38 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
I haven't yet created it. I might use some of the login page code to make the registration (def using the stylesheet)

Or could someone provide me with a registration and login page code (that look similar)

11Login page Empty Re: Login page Wed May 23, 2012 9:45 pm

RockerMan

RockerMan
Technician
Technician
The PHP behind a register/login system is very complex. You also need to have read/write access the the database. This means that you also have to place md5 security on both your register/login page or it will be prone to SQL Injection.

As for the register page, you could do it yourself. Learn from my code Smile

http://www.graphics-post.com/

12Login page Empty Re: Login page Wed May 23, 2012 10:56 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
xD I have mySQL access, but I'm not sure how much access I have. If you want to check, I use 3owl webhosting. It's free, but it isn't the best.

13Login page Empty Re: Login page Thu May 24, 2012 9:07 am

ankillien

ankillien
Administrator
Administrator
Login systems are complex and can't be done using copy-paste codes. You need to learn it and try yourself, I think.

Here is a good tutorial: http://www.phpeasystep.com/phptu/6.html

You can ask if you need help creating it Very Happy

14Login page Empty Re: Login page Thu May 24, 2012 1:35 pm

samkallis


Banned Member
Banned Member
Regardless whether you manage a small business, charitable organization, or Fortune 500 company, choosing the right web design firm can quickly

become a full-time research project. With thousands of design firms to choose from, what factors truly determine which design firm is best for

your business?

15Login page Empty Re: Login page Fri May 25, 2012 2:44 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
samkallis wrote:Regardless whether you manage a small business, charitable organization, or Fortune 500 company, choosing the right web design firm can quickly

become a full-time research project. With thousands of design firms to choose from, what factors truly determine which design firm is best for

your business?

Are you trying to spam? I think you are.

ankillien wrote:Login systems are complex and can't be done using copy-paste codes. You need to learn it and try yourself, I think.

Here is a good tutorial: http://www.phpeasystep.com/phptu/6.html

You can ask if you need help creating it Very Happy
Yeah Ank. Could I have some help creating it? xD

I'm having some trouble so I have turned to the expert Wink.

16Login page Empty Re: Login page Fri May 25, 2012 8:01 am

ankillien

ankillien
Administrator
Administrator
What help you need? Where are you stuck at?

Have you coded the registration page? If so, you can make the form submit the data to another or the same PHP page. After being submitted, PHP should validate the data (like if username already exists, if the passwords match, if the email is valid etc.) and then store the validated data in database otherwise return error message to the user.

Thats the process.

17Login page Empty Re: Login page Sat May 26, 2012 2:29 am

RockerMan

RockerMan
Technician
Technician
I'll post my code later, busy working right now.

EDIT: Here you go, I have only done the login script as I have a Python script to deal with for work. It include full security again SQL Injection and it has md5 encryption for the password. I have also commented the majority of the PHP so you can learn from it:
http://dl.dropbox.com/u/78118223/loginScript.zip

http://www.graphics-post.com/

18Login page Empty Re: Login page Thu May 31, 2012 7:05 pm

ankillien

ankillien
Administrator
Administrator
Is this solved?

19Login page Empty Re: Login page Sun Jun 17, 2012 10:36 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
No.

20Login page Empty Re: Login page Mon Jun 18, 2012 4:39 pm

ankillien

ankillien
Administrator
Administrator
RSguideMaker wrote:No.

How much of it is completed then?
Let us know if you are stuck somewhere.

21Login page Empty Re: Login page Mon Jun 18, 2012 10:40 pm

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Will do. Just busy with another IT project so lock it, and when I get back to this project and if I get stuck, I'll PM you to re-open it (if that's OK Razz).

22Login page Empty Re: Login page Tue Jun 19, 2012 10:02 am

ankillien

ankillien
Administrator
Administrator
Thats Ok.

Locked as requested.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Login page

Permissions in this forum:
You cannot reply to topics in this forum