Artisan Update: Readme, Contact page, login and dashboard.

What is the project about?

Artisan tends to link clients who require the services of an artisan (example electrician, plumber, tailor e.t.c) for their various needs. We stand in the gap to provide the best of the best in the various fields to meet your expected result.

How does it work?

Artisans register on the platform to get their information displayed on the search area for clients to view and request for their services.

On the other hand, the clients

Select the time and date that's convenient enough for him/her and let us know (via the request form provided on the landing page)
We confirm the appointment with our very best artisan for the job
Upon job completion, we confirm that our clients are satisfied with the job offered

New Features

Contact page: Users can now contact us via our contact form. Once the mail is sent, we receive a mail containing the message.

Implementation of login for users to have access to the functionalities of the platform

Login Option Modal

Login Page Function

DashBoard

Registration form was updated to accept just one email or phone per user account.
Updated the readme file on how to install the project on your local machine, how to contribute,

How I implemented this features

CONTACT PAGE:

In order to implement the Contact page I added jquery validation file using the tag

<script src="assets/js/jquery.validate.min.js" type="text/javascript"></script>

and then in my indexValidation.js I added the following code

$('#contactForm').validate({
      rules: {
          name: {
              required: true
          },
      email: {
              required: true,
        email: true
          },
      message: {
              required: true,
          }
      },

    submitHandler: function() {

          var that = $('#contactForm'),
                  url = that.attr('action'),
                  type = that.attr('method'),
                  data = {};

          that.find('[name]').each(function(index, value){
                  var that = $(this),
                      name = that.attr('name'),
                      value = that.val();

                  data[name] = value;
          });

          $.ajax({
              url: 'resources/script.php',
              type: 'POST',
              data: data
          })

          .done(function(data){
              if (data == 'Message has been sent.') {
                  $('p#message').css({
            "color":"green",
            "font-size":"18px",
            "text-align":"center"
          });
                  $('p#message').text(data);
                  console.log(data);
          setTimeout("$('p#message').text('')", 5000);

              } else if (data == 'Server error, try again later') {

                  $('p#message').css("color", "red");
                  $('p#message').text(data);
                  console.log(data);
          setTimeout("$('p#message').text('')", 5000);
              }

          })

          .fail(function(data){
              console.log("error encountered");
          });

      }

  });

And then to send the information on the contact form, I added the following snippet to my script.php

if (isset($_POST['sendMessage'])) {
      // collect posted data
      $name = htmlentities(strip_tags(trim($_POST['name'])));
      $email = htmlentities(strip_tags(trim($_POST['email'])));
      $message = htmlentities(strip_tags(trim($_POST['message'])));

      $to = $email;
      $subject = 'New Client Alert!!!';
      $from = "[email protected]";
      $body = "Hi, \n\n
             Kindly attentd the this message as a new client alert has been received.
             The details are: \n\n
             Name: " . $name ." \n\n
             Email: " . $email ." \n\n
             Message: " . $message . " \n\n
             Please ensure that clients are treated with high quality measures.";

      $success = mail($to, $subject, $body , 'noreply@artisan.com');

      if ($success) {
        echo "Message has been sent.";
      } else {
        echo "Server error, try again later";
      }

    }

USER LOGIN:

For user login, the design was updated and form validation was carried out using jquery

$('#artisanLogin').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true
      }
    },

    submitHandler: function() {

      var that = $('#artisanLogin'),
          url = that.attr('action'),
          type = that.attr('method'),
          data = {};

      that.find('[name]').each(function(index, value){
          var that = $(this),
            name = that.attr('name'),
            value = that.val();

          data[name] = value;
      });

      $.ajax({
        url: 'resources/script.php',
        type: 'POST',
        data: data
      })

      .done(function(data){
        if (data == 'Login Successful. Please wait...') {
          $('p#message').css({
            "color":"green",
            "font-size": "18px"
          });
          $('p#message').text(data);
          console.log(data);
          setTimeout("window.location = 'user/dashboard.php'", 3000);
        } else if (data == 'Password incorrect') {

          $('p#message').css("color", "red");
          $('p#message').text(data);
          console.log(data);
          setTimeout("$('p#message').text('')", 2000);
        } else if (data == 'Sorry, email doesnt exist') {

          $('p#message').css("color", "red");
          $('p#message').text(data);
          console.log(data);
          setTimeout("$('p#message').text('')", 2000);
        }

      })

      .fail(function(data){
        console.log("error encountered");
      });

    }

  });

And then the script to perform the login and confirm user details was placed in script.php

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

      $email  = htmlentities(strip_tags(trim($_POST['email'])));
      $password = htmlentities(strip_tags(trim($_POST['password'])));

      // confirm if the email exist
      $query_email = $conn->prepare("SELECT * FROM registration WHERE email =:email");
      $query_email->bindParam(":email", $email);
      $query_email->execute();
      $check_email_exist = $query_email->rowCount();

      if ($check_email_exist == 1) {

        $get_details = $query_email->fetch(PDO::FETCH_OBJ);
        $retrieved_password = $get_details->password;

        $check_password = password_verify($password, $retrieved_password);

        if ($check_password) {

          session_start();
          $_SESSION['email'] = $email;
          $_SESSION['details'] = $get_details;

          echo "Login Successful. Please wait...";

        } else {

          echo "Password incorrect";

        }

      } else {

        echo "Sorry, email doesnt exist";
      }

    }

And then to avoid user having access to dashboard without prior login, a script was placed at the header to automatically log them out

<?php
  try{
      session_start();
      //Check whether the session variable email or details is present or not
      if(!isset($_SESSION['email']) || !isset($_SESSION['details'])) {
          header("location: logout.php");
          exit();
      }
  } catch (Exception $e) {
      echo "Problem Somewhere: ". $e->getMessage();
  }
?>

Also added the logout script to logout users when they want to logout and the snippet is;

<?php
  session_start();
  if("email"){
      unset($_SESSION['details']);
      unset($_SESSION['email']);
      header("location: ../index.php");
      session_destroy();
  }
?>

REGISTRATION FORM UPDATE:

To allow a single user to a single phone number and email, the script.php file handling the registration form was modified to allow single emails and phone by confirming in the database if a previous entry has been submitted.

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

      // collect posted data
      $surname = htmlentities(strip_tags(trim($_POST['surname'])));
      $othername = htmlentities(strip_tags(trim($_POST['othername'])));
      $email = htmlentities(strip_tags(trim($_POST['email'])));
      $phone = htmlentities(strip_tags(trim($_POST['phone'])));
      $password = htmlentities(strip_tags(trim($_POST['password'])));
      $state = htmlentities(strip_tags(trim($_POST['state'])));
      $city = htmlentities(strip_tags(trim($_POST['city'])));
      $address = htmlentities(strip_tags(trim($_POST['address'])));

      // Confirm if email already exist
      $check_email = $conn->prepare("SELECT * from registration WHERE email=:email");
      $check_email->bindParam(":email", $email);
      $check_email->execute();
      $email_count = $check_email->rowCount();

      if ($email_count == 0 ) {

        // Confirm if phone number already exist
        $check_phone = $conn->prepare("SELECT * from registration WHERE phone=:phone");
        $check_phone->bindParam(":phone", $phone);
        $check_phone->execute();
        $phone_count = $check_phone->rowCount();

        if ($phone_count == 0) {

          // hash password using password_hash
          $hash_password = password_hash($password, PASSWORD_DEFAULT);

          // insert record into database
          $store = $conn->prepare("INSERT INTO registration (surname, othername, email, phone, password, state, city, address) VALUES (:surname, :othername, :email, :phone, :password, :state, :city, :address)");
          $store->bindParam(":surname", $surname);
          $store->bindParam(":othername", $othername);
          $store->bindParam(":email", $email);
          $store->bindParam(":phone", $phone);
          $store->bindParam(":password", $hash_password);
          $store->bindParam(":state", $state);
          $store->bindParam(":city", $city);
          $store->bindParam(":address", $address);
          $success = $store->execute();

          if ($success) {

            echo "You are registered successfully";

          } else {

            echo "Server error, try again later";

          }

        } else {

          echo "Phone number already registered";

        }

      } else {

        echo "Email address already exist";

      }

    }

Commits on GitHub

Previous Update

https://utopian.io/utopian-io/@chri5h/55dga9-artisans-bridging-the-gap-between-clients-and-artisans

How to contribute

Fork the repo https://github.com/chrix95/artisan
Create your feature branch
Commit your changes
Push to the branch:
Submit a pull request.

Sort:

Trending

[-]

utopian-io (71) 6 years ago

Hey @chri5h

We're already looking forward to your next contribution!

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord https://discord.gg/h52nFrV

$0.00