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

in utopian-io •  last year  (edited)

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.

ContactMessage.JPG

  • Implementation of login for users to have access to the functionalities of the platform
Login Option Modal

Login Options.JPG

Login Page Function

LoginMessage.JPG

DashBoard

Dashboard.JPG

  • 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 , '[email protected]');
    
          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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution.


Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.

[utopian-moderator]

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