CA IN LIEU OF EXAMS

BSc(HONS) INFORMATION SYSTEMS- YEAR 2 (INFORMATION SYSTEMS

INNOVATION AND WEB TECHNOLOGIES- SIS 2026Y)

Chuttoo Mohammad
MAY 2020 MR. CHUTTUR YASSER
Wassil (1815784)
Qu1

Idea:
- an online store for selling gifts, cakes and bouquets for special occasions.

- With people performing more online shopping for buying gifts for their loved ones, we decided to
create an online website promoting local products and talents (like pastry) to the population.

Purpose:
- Allow customer to buy specific gift for birthday, wedding or other specific occasions.

- Cakes provided can be personalized as per the customers’ requirements.

- Customer can order for customization some of the products available on the website by adding either
texts or images according to theme of the party or the taste of person they intend to give the gift.

Objectives:
- The objective is to promote online shopping for gifts, cakes and bouquets and to provide the
appropriate gifts to your loved ones.

- Increase sales and be more attentive to each customer queries through emails. More efficiency for
customer satisfaction and profit than an on-site business.

- To offer a 24/7 service to the customers.

Qu2

Audience chosen: teenagers and working people with late office hours

The design addresses the targeted by:

- Having a simple design to display the contents.

- Having a readable font and font size for easiness for reading.

- Having colors which are closer to classic view rather than having too much colors which might be
uncomfortable for the eyes of the customers.
 - Having minimum amount of information available on the webpage but which are informative and
straightforward.

- Making use of graphical representation like images, gifs or videos to make the webpage more
attractive and to catch the interest of the public.

Qu3

Wireframe diagrams choices:

- Designs are chosen based on the existing ecommerce that are quite similar to the concept, I have
chosen to design my website like aliexpress.com, gifts.com

- Designed by taking considerations of every features that may bring some more attractiveness and
complexity that might intrigue the curiousness of the customer.

Wireframe vs final website version:

- The final version of the website is different compared to the wireframe diagrams designed before.

Wireframe version of the home page. The final version of the website

- Unnecessary features like side navigation and slideshow in the home page from the wireframes were
removed for more simplicity and more satisfaction while browsing.
Qu4

Color scheme strategy for ecommerce site:

- By considering the average age group of targeted audience that would most visit the website.

- Learn the psychological aspect of the color we choose and their compatibility together

- By using color chart or color wheel to have an idea of which combinations give the best feeling to the
public.

- Make sure that the color scheme chosen reflects the personality of the logo designed for the website.

- Consider the user experience while choosing color, to avoid eye strain and un-comfortability while
browsing the website.
Qu5

Examples CSS used in the design of the website:

- Use of image for background, rendering forms to make them more presentable for the customer to
interact with.

table{
background:url("../images/signin.jpg"); --searching the image in the system folder
}

- For beautifying buttons with colors, making the button more attractive and unique.

button {
background-color: #4CAF50; --color of button using color wheel code
color: white; --color of the writing on the button
}
- Sizing and adding border-radius to images

img{
width:60%; --size of the width of the image according to the screen size rather than px
height:40%; -- size of the width of the image according to the screen size
border-radius:20%; --size of the roundness of the border, adjusting to the size of the image
}

- positioning of footer (relative, absolute, fixed or sticky) and alignments of the items found in it.

footer {
    position: relative;
    width:auto;
    background-image:url("../images/cover.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;  
 display:block;
    color:white;
    height:8%;
    margin-top:25px;
 }
 .sn ul li{
     margin-top:0.5%;
     float:center;
 }
  .sn i{
     font-size:17px;
 } 
 - changing of color of submit button while hovering mouse on it.

input[type=submit]:hover { --calling the button while mouse hovering it

  background-color: green; --color to activate when hovering
  color:white; --the color the font will change into
  transition:0.8s; --time taken for the change in colors to take place
}

Qu6

Catering of proximity, repetition and alignment in website:

- The header, footer, background body are repeated through almost every page found in the website, so
to allow those repetitions to be identical, an external CSS file which can be linked and accessed across
all the html or php files with the attributes needed.

- To allow for the content and the webpage to be related (for example, page for the bouquet must
contain pictures of bouquets not those of cakes), when creating the folder specific for images, it has be
split to fit the different categories of products available on the website the convenient naming to allow
searching while coding easier.

- Contents are aligned in an orderly way, making understanding much easier. The wordings are
categorized as heading, paragraphs, bold characters or italic characters each specifying an exact
meaning to the customers and aligned by using text-align (center, top, bottom, right, left). Using CSS,
the contents are aligned by using display (flex, flex-wrap, wrap or grid) or by using align-content
(center, top, bottom, right, left).
Qu7

Example of JS and jQuery used in website:

- Fading of image when hovering mouse on it and to make description to appear, to allow user to know
which category of product the cursor is pointed on.

$(document).ready(function(){
    $(".row").ready(function(){
        $(".col .h").hide();
        $(".col .h1").hide();
        $(".col .h2").hide();
    })

    $(".img").hover(function(){
        /*$(".img").fadeToggle();*/
        $(".col .h").fadeToggle();
    })

    $(".img1").hover(function(){
        /*$(".img1").fadeToggle();*/
        $(".col .h1").fadeToggle();
    })

    $(".img2").hover(function(){
       /* $(".img2").fadeToggle();*/
        $(".col .h2").fadeToggle();
    })
})
- The toggle the submenus of the dropdown navigation while hovering.

$(document).ready(function(){
    //hide all submenus when page loads
    $(".nav").ready(function(){
        $(".submenu").hide();
        $(".subsubmenu1").hide();
        $(".subsubmenu2").hide();

    })
    
    //show submenu on hovering the menu 
    $(".menu1").hover(function(){
        $(".submenu").fadeToggle();
          
        //only show the submenu of this particular menu
           $(".submenu1").hover(function(){
             $(".subsubmenu1").fadeToggle();
           })
            
           $(".submenu2").hover(function(){
            $(".subsubmenu2").fadeToggle();
          })
    })
    })

- A fade effect while webpage is loading, indicating the user if the page has finished loading or not.
$(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut ("slow");;
    });

- By using another library of JS than jQuery, implementing a zooming effect on the product while
hovering, allowing user to get a more detailed overview of the product.
 $('#myimg').imagezoomsl({
  zoomrange:[1,2],
  zoomstart:2,
  innerzoommagnifier:true,
  classmagnifier:'glass',
  magnifiersize:[100,100]
});

user navigating of the product image to zoom on the part he desires to.

- Navigate to the previous page visited when clicking on ‘continue shopping’ button found on the cart
page, allowing to continue browsing from where they left before going to perform purchase.

<script>
       function goBack() {
        window.history.back();
        }
</script>

Qu8

Use of php:
- Connect to website database found on phpMyAdmin

<?php
// Connecting to DB
$serverSQL = "localhost";
$usernameSQL="root";
$passwordSQL ="";
$db="webproj";
$mysqli= new mysqli($serverSQL, $usernameSQL, $passwordSQL, $db);

if (mysqli_errno($mysqli)) {
    // If there is an error with the connection, stop the script and display the error.
    die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}
        echo "Connected successfully"; // displaying success of connection to DB
?>

Indicating the success of the code for connecting the php file to the database

- Verify username and password data input against data saved while user signs in the website.

<?php
session_start();
require("connect.php");

$username = $_POST['uname'];
$password = $_POST['psw'];

if($username=="" || $password==""){

    header("location:login.html");  
}else{
    $sql = "SELECT * FROM cust WHERE pwd='{$password}' AND Username='{$username}' ";
        $query = mysqli_query($mysqli, $sql);
        $result = mysqli_fetch_array($query, MYSQLI_BOTH);

        if($result!=null && sizeof($result)>0){
            $_SESSION["user"]= $result['Fname'].' '.$result['Lname'];
            
                    header('Location: index.php'); 
        }       
         else{
             header("location:login.php");
             echo "<script>javascript: alert('login failed!')<script>";
        }
}
?>

- Use of session to display a message like “Welcome {username}” on the header of the website.

<?php
  require("connect.php");
  session_start();  
  ?>

Welcoming user after he/she logged in using his/her credential

- Use to fetch data of products and display on webpage.

<?php
                $sql="SELECT *
                   FROM product
                   WHERE pid=7";
                     $query = mysqli_query($mysqli, $sql);
                     $result = mysqli_fetch_array($query);
                     echo "<img src=".$result["img"]." id='myimg'>";
             ?>

  <h2><?php echo $result['descrip']?></h2><br>

   <input type="hidden" name="head" value="<?php echo $result['descrip']?>"><hr><br>                
  <div id="price">Price: Rs.<?php echo $result['price']?></div><br><br>           

Php code displaying the details of the products, after fetching those details from the database.

- Insert new user credentials in the database.

<?php
    session_start();
    // Call the connect_db.php page
    require("connect.php");
    
    <?php
    header("location:register.html");
    }
    // Declare variables
    $fname="";
    $username = "";
    $password="";
    $lname="";
    $contact="";
    $gender="";
 
    // Check if the page is posted
    if(sizeof($_POST)>0){
        // 0. Capture the posted values
        $fname=$_POST["fname"];
        $lname=$_POST["lname"];
        $contact=$_POST["contact"];
        $gender=$_POST["gender"];
        $username=$_POST["uname"];
        $password=($_POST["pwd"]);

            $sql1 = "
                INSERT INTO cust(Fname,Lname,ContactNo, Gender, Username, pwd)
                 VALUES ('{$fname}','{$lname}','{$contact}','{$gender}','{$username}', '{$password}')
            ";
            // Prepare the SQL query
            $query1 = mysqli_query($mysqli, $sql1);
            if (mysqli_query($mysqli, $sql1)) {
                echo "New record created successfully";
                header("location:index.html");
             } 
             else {
                echo "Error: " . $sql . "" . mysqli_error($mysqli);
             }
        } 
    }
?>

- Delete records in the database from the webpage.

<?php    
   function delete(){
    require("connect.php");

    $id=$_GET["id"];

    if(!empty($id)){
       $sql="DELETE 
       FROM cart
       WHERE cartid='$id'";

        if (mysqli_query($mysqli, $sql)) {
            echo "Record deleted successfully";
        } 
        else {
            echo "Error deleting record: " . mysqli_error($mysqli);
        }
    }
   }
       delete();
?>      

Initial records on the cart table

Before clicking the delete button

 After clicking the delete button

Record deleted in the table

- Redirecting to a specific page when submitting a form.

header('Location: index.php'); 

- Calculating price while retrieving values from database.

<?php
                        $total+=$cart['totalPrice'];       
                        ?>
- When updating information in database, it allows the updated information to be displayed on the
webpage automatically.

Before updating in phpMyAdmin

initial value on phpMyAdmin

Updating the price of the product phpMyAdmin

Updated price displayed on the webpage.

Qu9

Use of MySQL Database:

- Allows the storage of data input from the webpage through the use of PHP programming.

- Allows to connect database to the website through PHP programming.

- To create SQL queries on the online platform for CRUD (create, read, update, delete) operations.

- Records transactions taking place on the website from the calculations on the PHP file.

Qu10

Use of SEO techniques in my e-commerce website:

- Use of social media page or profile of business linked on the website.

- Use of title tag within the HTML head, to get an overview of the content to expect on the webpage.

- Use of H1 tag, to summarize the content to be found on the webpage.

- Use if HTML site map based on the menu pages to link the webpage to the whole website.

- Break up content with subheadings from H2-H6 tags which helps in containing keyword that the page
targets.