Front End Design

FrontEnd Design

User authentication

User authentication is a most usual task, which is required on almost every web site, where user get services or information according to data, he has submiited or modified in his private area.

Below is the working example of authentication form, where PHP and mySQL are used. You can check it out with any login/password pair you want. Create an entry and log in to check if it works. Since it is an example application, number of tries is limited.

Enter Login Details

Login Status

Log in
Sign In

Usual approach by authenticating is encrypting of data. Password is stored is so called hashed form. For example myPassword will look like $2y$10$4Ymy5uNrmon/Yywn3VjxyeCkB2abii3OaGurutpD8hmLJ.JzAnBv2 in hashed form. Each server language has its own built in encrypting instruments.

PHP offers easy to use functions hash_password() and verify_password() to get this done. I have earlier version of PHP on server, where these functions are not supported, and had to look for other solutions.

To illustrate general idea I include below some js code, which encrypts text using a key.

Insert text you want to encode in upper text field and press Encode button. Result text field will display encoded text.

Important part of encrypting is to get encrypted hash string look back as readable original text. Copy hashed string from below and insert it in upper text field. Click Decode button to get your original text displayed in Result text field.

Encode
Decode

Custom Code

  • Image Training Vocabulary
    Training new vocabulary online
  • Image Images carousel
    Carousel with parallax
  • Image Info Cards
    Profile and product cards
  • Image Rounded Corners
    Add rounded corners to layers
  • Image Compare Images
    Compare two images
  • Image Images slideshow
    Scalable Images slideshow
  • Image Clip-path
    Animation with clip-paths
  • Image Rotating Heading
    Heading moving in a circle
  • Image Simple Charts
    Simplest Charts Ever
  • Image Curved Divs
    Custom curved divs
  • Image Niper sticks
    Niper Sticks
  • Image Google Charts
    Using Google charts
  • Image Log In Form
    MySQL/PHP authenication
  • Image HTML Post
    Send HTML in you email
  • Image Google Sheets
    Embed Google sheets into web site
  • Image Flip Card
    Flip person or product card
  • Image Banner ads
    Clickable banner ads
  • Image Json+MySql
    Retrieve Data with Json and MySql
  • Image Calculate Route
    Calculate Route Length on Map
  • Image Online quest
    Online language quest
  • Image Scattered text
    Online language quest
  • Image Map with regions
    Interactive map with regions
  • Image Splitted SVG
    Splitted SVG heading
  • Image Translate Page
    Translate page into user language
  • Image Math on Page
    Display math in html