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 = "noreply@artisans.com";
        $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

• https://github.com/chrix95/artisan/commit/18f5813456c97e6f456a43870a2507279181c791
• https://github.com/chrix95/artisan/commit/54f0022f946cc204c686ca9c7d156223267211cc
• https://github.com/chrix95/artisan/commit/62b5db477f62f1a7d61aa0a1fc44642b3a85e294
• https://github.com/chrix95/artisan/commit/28332ebbdd7e3ebeafd31451ba8a96ab70dc7a64

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.