Jump to content

CSS design/layout help.


paddyhaig

Recommended Posts

That did it! Phew! We were in a pickle for a while there...

Do you know if the is any way of making the browser cursor start in the first input box (

Username) by default, instead of having to click on it? Like if I go to Google, my cursor always automatically starts in the query box?

Link to comment
Share on other sites

Ahhh, If it were as easy as that!

I found the same string out there on the tinternet, but alas dear Yorick, I don't know where to put the damned thing and me being a grown man and all that.

I really hate to bother you any more ignace, you have been God sent!

Did you log in and take a look at what's yet to be done. Daunting!~

I just want to say thank you for everything. Thank you, thank you, thank you.

Link to comment
Share on other sites

It's Ok I got it! For any one else out there here's an example of where to use this little bit of code to make your cursor start in a specific dorm field. Thanks go to Ignace.

This is the line that does the magic:

<body onload="document.getElementById('username').focus()"><div id="blue-box">

 

<html>

<head>

    <meta http-equiv="Content-Language" content="en-us">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <title>Concierge</title>

    <style type="text/css">

       

#blue-box {

            position: relative;

            width: 384px;

            height: 357px;

            margin: 0 auto;

            background-image: url(graphics/concierge_auth.jpg);

 

            color: #FFF;

            font-family: Helvetica, Arial, Verdana, sans-serif;

        }

       

form {

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -55px;

            margin-left: -65px;

            width: 200px;

            height: 150px;

        }

       

form label {

            font-weight: bold;

        }

 

    </style>

 

    <!--[if IE]><style type="text/css">body { text-align: center; } #blue-box { text-align: left; }</style><![endif]-->

</head>

 

<body onload="document.getElementById('username').focus()"><div id="blue-box">

    <form action="scripts/authenticate/auth.php" method="POST">

        <div>

            <label for="username">Username</label>

            <input type="text" id="username" name="username">

        </div>

        <div>

            <label for="password">Password</label>

            <input type="password" id="password" name="password">

        </div>

        <input type="submit" name="submit" value="Login">

    </form>

</div>

 

<div style="text-align:center">Concierge system powered by <a href="#">Onina</a></div>

</body>

</html>

Link to comment
Share on other sites

I feel like I am eventually making progress. A huge thanks to Ignace and PHPFreaks.

However the is still so much more to be done...

I want to be able to secure all the pages so that no one can circumnavigate the initial authentication page. I am not sure how this is done, possibly with a cookie of some description. As it is you can go straight in if you know the URL. 

http://www.onina.net/concierge/admin/index.php

Now I would like to make.

1, A common .css document (For the rest of the site)

2, A common .dbx document, so that the database (mySQL) coneXion settings are all in the same document.

3, Figure out a better, maybe cleaner interface. I would like for it to possibly be used in a kiosk with a touch screen. SO all the buttons have to be fairly large.

 

I have a virtual keyboard, that runs as a Windows app, and a batch script that brings up both ie in kiosk mode and the virtual keyboard placed where I want it on the screen. But I would like it if the Web app had it's own virtual keyboard (Possibly java or flash) that was platform independent. Any and all ideas are greatly appreciated. 

Link to comment
Share on other sites

I have edited your PHP code and marked it, all you need to do now is add before or after the <form> tag:

 

<?php if (isset($_GET['message'])): ?>
<p class="error"><?php print $_GET['message']; ?></p>
<?php endif; ?>

 

The edited code

 

if (isset($_POST['submit'])) {
  $db = mysql_connect('localhost', 'onina', 'example') or die("Couldn't connect to the database<br>" . mysql_error());
  mysql_select_db('oninacom_concierge', $db) or die("Couldn't select<br>" . mysql_error());

  $login = mysql_real_escape_string($_POST['login'], $db);
  $password = mysql_real_escape_string($_POST['password'], $db);

  $query = "SELECT privilage FROM auth WHERE login = '$login' AND password = '$password'";
  $result = mysql_query($query, $db) or die("Problem with the query: $query<br>" . mysql_error());
  if (0 === mysql_num_rows($result)) {
    //EDITED CODE HERE
    header('Location: ../../index.php?message=' . urlencode('Incorrect username and/or password'));
    //EDITED CODE HERE
    exit(0);
  }

  $row = mysql_fetch_assoc($result);
  $privilage = $row['privilage'];

  session_start();
  $_SESSION['username'] = $login;
  $_SESSION['privilage'] = $privilage;

  if ('receptionist' === $privilage) {
    header('Location: ../../employees/receptionist/index2.htm');
    exit(0);
  }

  if ('manager' === $privilage) {
    header('Location: ../../employees/managers/index1.htm');
    exit(0);
  }

  if ('administrator' === $privilage) {
    header('Location: ../../admin/index.php');
    exit(0);
  }
}

 

I want to be able to secure all the pages so that no one can circumnavigate the initial authentication page. I am not sure how this is done, possibly with a cookie of some description.

 

Add to the pages you want to protect:

 

if (empty($_SESSION['login']) || empty($_SESSION['privilage'])) {
  header('Location: ../../index.php');//this path may be incorrect, please correct
  exit(0);
}

 

1, A common .css document (For the rest of the site)

 

Create a file with the .css extension and link to it using the <link> tag as:

 

<link href="style.css" type="text/css" rel="stylesheet" media="screen">

 

2, A common .dbx document, so that the database (mySQL) coneXion settings are all in the same document.

 

Make that a common .php file so no-one can read it and include it:

 

require 'db.php';

 

3, Figure out a better, maybe cleaner interface. I would like for it to possibly be used in a kiosk with a touch screen. SO all the buttons have to be fairly large.

 

You can use the same setup for the rest of the website

 

But I would like it if the Web app had it's own virtual keyboard (Possibly java or flash) that was platform independent.

 

You can create one using JS, just take a look at google.com click the little keyboard in the search bar.

Link to comment
Share on other sites

Last thing is first: A Java keyboard. You say I can create one using JS, just take a look at google.com click the little keyboard in the search bar. I don't seem to have a little keyboard in my search bar. Actually which search bar are you talking about. I have a Google search bar built into my Firefox browser or the search input box when I pull up the Google web site?

Link to comment
Share on other sites

Mmmm, we don't seem to get that feature here on the U.S version of Google. But I do see what you are saying in regards to a Java keyboard. I looked all over for the code but don't seem to of done so well so far. I like it though! Thanks for the heads up  :D

Link to comment
Share on other sites

That's all we get here. See graphic... I am originally from just outside of Liverpool in the UK, but now live in New Orleans, USA. I did once live in Bruxelles about 20 years ago. I do love Belgium.

 

[attachment deleted by admin]

Link to comment
Share on other sites

Please excuse me if I am wrong, but you would be a Walloon? Whatever you are you have been very kind and very helpful, thank you so very much!

Did you log into the site? I think I am starting to get a grasp of css. Although I am cheating a little as I am also using Dreamweaver.

Link to comment
Share on other sites

I guess your not a Walloon! I just quickly researched Walloons, you would be Flemish, I never could quite figure it out. Just like PHP and CSS. LOL  :D

I remember a lot of Graffiti in Brussels whilst I was there referring to the different sides to the Belgian cultures. In the UK, I guess we just have football teams that hate one another. Lol, never really my thing. Again I really do appreciate all the help you have given me.

Link to comment
Share on other sites

I am indeed a Flemish person :) Yeah Brussels indeed has a lot of graffiti. All are written in French by rival graffiti gangs. Besides football team supporters that hate one another we also have the Flemish VS Walloons as the latter refuses to speak Flemish even in the Flemish parts and demand that we (Flemish) speak French or now that we no longer have a government they demand that we give even more of Belgium to the Walloons if we want to split BHV. We have an old grudge against French (since WW2 and the "Et pour le Flamand, le meme choice"-incident) as we are proud of our language. Even our King barely speaks Flemish.

 

To bad we have such a great health care and education (that is also they only things we are great at though) or I would have bolted a long time ago.

 

http://www.askmen.com/specials/top_29_cities/ -- is a good start if I ever would decide to move

Link to comment
Share on other sites

Wowser! Well the Flemish have my vote. I totally love the Askmen webmag, I was just reading it the other day. London was number 5, New York number 1.  Both I have lived in and didn't really like. I didn't see Brussels, Liverpool or New Orleans. Oh well!

I was trying to think of a different way to represent the buttons on the Concierge project. If you log in, you will see a rather goofy looking table with some button graphics.  I want buttons that will be easy to press with a finger on a touch screen. I was wondering if I used the same graphic with no text on it for the buttons and overlay the text with css. Therefor the page would load faster as the graphic would be cached and the text would be super fast.

I would use the same backdrop as the authentication screen.

Link to comment
Share on other sites

Just out of interest, does anyone use an IDE for css and php and if so which one?

 

See my sig, it's really great. It for example supports Zen Coding, a little example:

 

html5>head+body>div#wrapper>div#header+div#content+div#footer

 

creates

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</body>
</html>

Link to comment
Share on other sites

1, I have somehow messed up my auth page/script again. I changed the default login button for a custom graphic/button that could be used on a touch screen. (I think this is ok) I also added an additional input field (I think this is where the problem is). I don't really need the field to work at the moment, but I will be introducing it at some point and would like it at least to be a visual representation of a future feature.

2, How do I add script's and code to PHPfreaks in that little scrollable window as  Posted by: ignace. earlier.

 

Here is my authentication dialog page.

 

<html>

<head>

    <meta http-equiv="Content-Language" content="en-us">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <title>Onina Concierge Login</title>

    <style type="text/css">

       

#blue-box {

      position: relative;

      width: 384px;

      height: 357px;

      margin: 0 auto;

      background-image: url(graphics/small_backdrop.jpg);

      color: #FFF;

      font-family: Helvetica, Arial, Verdana, sans-serif;

        }

       

form {

position: absolute;

top: 143px;

left: 182px;

margin-top: -55px;

margin-left: -65px;

width: 145px;

height: 149px;

        }

       

form label {

            font-weight: bold;

        }

 

    </style>

 

    <!--[if IE]><style type="text/css">body { text-align: center; } #blue-box { text-align: left; }</style><![endif]-->

 

</head>

 

<body onLoad="document.getElementById('account').focus()"><div id="blue-box">

 

    <form action="scripts/authenticate/auth.php" method="POST">

   

        <div>

            <label for="username">Account:</label>

            <input type="text" id="account" name="account">

        </div>

       

        <div>

            <label for="username">Username:</label>

            <input type="text" id="username" name="username">

        </div>

       

        <div>

            <label for="password">Password:</label>

            <input type="password" id="password" name="password">

        </div>

  <p>

      <input type="image" src="graphics/general/login_button.jpg" onClick="document.submit();> 

      <p><img src="graphics/general/login_button.jpg" width="150" height="28" alt="login">

  </p>

</p></form>

  </div>

 

<div style="text-align:center">Concierge system powered by <a href="http://www.onina.net/onina/public_html2/">Onina</a><a href="#"></a></div>

</body>

</html>

 

Here is my auth.php script.

 

<?php

if (isset($_POST['submit'])) {

  $db = mysql_connect('localhost', 'example', 'example') or die("Couldn't connect to the database<br>" . mysql_error());

  mysql_select_db('concierge', $db) or die("Couldn't select<br>" . mysql_error());

 

  $login = mysql_real_escape_string($_POST['username'], $db);

  $password = mysql_real_escape_string($_POST['password'], $db);

 

  $query = "SELECT privilage FROM auth WHERE login = '$login' AND password = '$password'";

  $result = mysql_query($query, $db) or die("Problem with the query: $query<br>" . mysql_error());

  if (0 === mysql_num_rows($result)) {

    header('Location: ../../index.php');

    exit(0);

  }

 

  $row = mysql_fetch_assoc($result);

  $privilage = $row['privilage'];

 

  session_start();

  $_SESSION['username'] = $login;

  $_SESSION['privilage'] = $privilage;

 

 

  if ('receptionist' === $privilage) {

    header('Location: ../../employees/receptionist/index2.htm');

    exit(0);

  }

 

  if ('manager' === $privilage) {

    header('Location: ../../employees/managers/index1.htm');

    exit(0);

  }

 

  if ('administrator' === $privilage) {

    header('Location: ../../admin/index.php');

    exit(0);

  }

}

?>

Link to comment
Share on other sites

I am so sorry  ignace, the thing is, I don't remember touching the auth.php script at all. I figured that was fine and working ok. The only changes I remember making where to the index.php form layout. Weird! Thanks again, I am such a duffus! 

Maybe you can help me with this, how do you enter code in those little scrolling windows on the phpfreaks site?

Link to comment
Share on other sites

I seem to be a bit stuck with the below code. I am not sure where I should put it in the run of things. I ended up putting it in a separate auth_check.inc. Then tried to include it in some of my pages. <?php include("../includes/auth_check.inc"); ?>

But it doesn't seem to work.

 

 

if (empty($_SESSION['login']) || empty($_SESSION['privilage'])) {

  header('Location: ../../index.php');//this path may be incorrect, please correct

  exit(0);

}

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.