WEBG301: Project WEB - Assignment 1 (pass), Assignments of Web Design and Development

WEBG301: Project WEB - Assignment 1 (pass)

Typology: Assignments

2019/2020

Uploaded on 08/17/2022

flex.lowey
flex.lowey 🇻🇳

4.8

(104)

33 documents

1 / 57

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Higher Nationals in Computing
WEBG301: WEB Project
ASSIGNMENT
Name: NGUYEN GIA HUY
ID: GCS200801
Class: GCS0905C
Subject code: WEBG301
Assessor name: PHAN MINH TAM
Assignment due: Assignment submitted:
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a
pf2b
pf2c
pf2d
pf2e
pf2f
pf30
pf31
pf32
pf33
pf34
pf35
pf36
pf37
pf38
pf39

Partial preview of the text

Download WEBG301: Project WEB - Assignment 1 (pass) and more Assignments Web Design and Development in PDF only on Docsity!

Higher Nationals in Computing

WEBG301: WEB Project

ASSIGNMENT

Name: NGUYEN GIA HUY

ID: GCS

Class: GCS0905C

Subject code: WEBG

Assessor name: PHAN MINH TAM

Assignment due: Assignment submitted:

ASSIGNMENT FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing Unit number and title WEBG301: WEB Project Submission date Aug 15th, 2022 Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name

  1. Nguyen Gia Huy
  2. Tran Nhat Minh
  3. Huynh Tran Anh Khoa
  4. Nguyen Phu Quang Student ID
1. GCS
2. GCS
3. GCS
4. GCS

Class GCS0905C Assessor name Phan Minh Tam Student declaration I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature HUY Grading grid P M D

Table of Contents

  • WEBG301: WEB Project ASSIGNMENT......................................................................................................................
  • Chapter 1: Introduction
    • 1 Background information
      1. Project aim and objectives
  • Chapter 2: Literature Review
      1. Introduction
      1. SDLC model
      • 2.1. Introduction to SDLC.
      • 2.2. Type of SDLC
      • 2.3. SDCL applied in the project
      1. MVC architecture
      1. PHP Frameworks
      • 4.1. What is PHP Framework?
      • 4.2. Why use a PHP Framework?
      • 4.3. Common PHP Frameworks
      • 4.4. PHP Framework is used in the project
      1. Database
      1. Techniques and Tools
  • Chapter 3: Requirements Analysis
      1. User’s requirements
      1. Use case diagram
    • 2.1. Use case
    • 2.2. Use Case specification
      1. Gantt chart
  • Chapter 4: Design......................................................................................................................................................
      1. Site map
    • 2 Database design
      • 2.1. Database diagram
      • 2.2. Data dictionary
      1. WireFrame design
      • 3 .1. User interface
      • 3.2. Admin interface
  • Chapter 5: Implementation
      1. Application screenshots
      1. Sample source code
      • 2.1. View
      • 2.2. Model
      • 2.3. Controller
      1. GitHub Repository
  • Chapter 6: Conclusion
      1. What went well.
      1. What did not go well?
      1. Lessons learned and further improvements
  • REFERENCES

Chapter 2: Literature Review

1. Introduction

There are several software lifecycle development models available today, with three typical SDLC techniques being the waterfall methodology, iterative development, and component-based software engineering. In this study, our team will explain the techniques as well as discuss some of the reasons for their creation.

2. SDLC model

2.1. Introduction to SDLC.

The Software Development Life Cycle (SDLC) model is a conceptual framework for project management that delineates each stage of a software development project, from planning to maintenance. This process is tied to several models, each of which includes a variety of duties and actions. It typically consists of six steps: ideation and planning, requirements collecting, design and prototyping, software development, testing and integration, implementation and deployment, and operation and maintenance. Depending on the size of the project, some project managers may combine, divide, or omit processes.

2.2. Type of SDLC

2.2.1. Waterfall Model

The Waterfall Paradigm is a sequential model for software development that separates it into pre- defined phases. Each phase must be completed before moving on to the next, with no gaps between them. Each phase is meant to accomplish a particular activity during the SDLC phase. Winston Royce first debuted it in 1970.

2.2.2. Agile model

The agile SDLC model is a combination of iterative and incremental processes focusly on

customer satisfaction by rapidly delivering a working software product. In this model, every

process are being cut down to small builds.

Cross-functional teams are required to be working simultaneously on various areas such as:

Planning, analysis, design, coding, unit, and acceptance testing. At the end of the process, a

working product will be displayed to the customer and stakeholders

2.2.4. Prototyping model

The Prototyping Model is one of the most popularly used Software Development Life Cycle

Models (SDLC models). This model is used when the customers do not know the exact project

requirements beforehand. In this model, a prototype of the end product is first developed,

tested and refined as per customer feedback repeatedly till a final acceptable prototype is

achieved which forms the basis for developing the final product.

2.3. SDCL applied in the project

Our team chose to use the waterfall mode because this is a small project with few complicated functions. The reason why our team chose this model is that:

  • This model is appropriate for a small group of individuals.
  • Easily collects, records, and organizes work.
  • Easily creates shared goals for the planning and documentation stages. •Timelines and deadlines that are clearly stated.

3. MVC architecture

A data model, presentation information, and control information are required for an

application to follow the Model View Controller (MVC) architectural pattern. Each of them

must be separated into separate things in accordance with the pattern.

MVC is more of an architectural pattern than a complete program. The UI/interaction layer of

an application is a key focus of MVC. You will still require a business logic layer, maybe a

service layer, and a data access layer.

Model : The component that represents all the data-related logic that a user interacts with is called the model. This might be supplementary data relating to business logic or the data being communicated between the View and Controller components. For instance, a customer object will retrieve customer information from a database, modify it, and either use it to render data or return it to the database. View : The application's UI logic is handled by the View component. For instance, the Customer view will have all of the UI elements, such as text boxes, dropdowns, and other controls, that the end user interacts with. Controllers : Operate as a bridge between the Model and View components, handling all business logic and incoming requests, altering data using the Model, and interacting with the Views to generate the result. The customer model is used to update the database, and the customer controller, for instance, will manage all interactions and inputs from the customer view. Using the same controller, the customer data will be shown. Advantages Disadvantages

  • The model, controller, and views may all be worked on concurrently by many developers.
  • MVC enables the logical grouping of related controller operations. Additionally, views for certain models are organized. - Framework navigation may be difficult since it provides new layers of abstraction and requires users to follow MVC decomposition standards. - It's becoming standard practice to understand different technologies. MVC developers need to be skilled in several different technologies.

they are carefully tested for quality and performance. ✓ Less code is needed - When framework functions are utilized, writing original code is not as necessary. ✓ Libraries for common activities - Creating applications involves many repeated procedures, such as data cleaning, validation, and CRUD operations. Frameworks make it possible to carry out these simple actions by using built-in functionalities. ✓ Following best practices - PHP frameworks frequently follow best practices, such as adopting correct naming conventions and arranging code in a neat and manageable way. ✓ More secure – Using PHP frameworks lowers the risk of threats like SQL injection and cross-site scripting. In excellent PHP frameworks, built-in precautions defend against such common dangers. ✓ Collaboration is possible because using frameworks creates clear project guidelines that are simple for developers to adopt and collaborate on. ✓ Better maintainability: PHP frameworks help to create leaner, more maintainable code bases. The framework's designers are also in charge of maintaining the main framework. 4.3. Common PHP Frameworks In order of popularity and capability to enable speedy application development, the following are some of the top PHP frameworks:

  1. Laravel
  2. Symfony
  3. CodeIgniter
  4. Zend Framework / Laminas Project
  5. Yii (Framework)
  6. CakePHP
  1. Slim
  2. Phalcon
  3. FuelPHP
  4. Fat-Free Framework 4.4. PHP Framework is used in the project For this project, our group decided to build the system using the Laravel framework. I selected Laravel since it is the most well-liked free and open-source PHP framework:
  • Compared to other frameworks, it can securely and quickly manage complex applications.
  • Laravel includes several features that make it easier to configure and customize complex applications, including support for the MVC architectural style, authentication, authorization, encryption, hashing, password reset, data transfer, and many others.
  • The characteristics that make Laravel fast and secure are well recognized. Additionally, it is extremely versatile and changes to reflect the most recent developments in web development. 5. Database

functions, clients or application programs can communicate with the database server (MySQL).

6. Techniques and Tools Name Tool or Techniques used to XAMPP Tool Database management virtual machine VS CODE Write the source code of the system. WebPHP Font-end design for the system PHPstorm Write the source code of the database MySQL WorkbenGitHubch Write the source code of the database Share code, exchange to find programming direction HTML 5 Technique Programming languages used to design interfaces CSS Programming languages used to design interfaces PHP The programming language used to write the source code for the features in the system JavaScript The programming language used to write the source code for the features in the system Laravel Framework for programming support Ajax The programming language used to write the source code for the features in the system to store the session Bootstrap Align your website to be compatible with different devices such as smartphones, tablets,...

Chapter 3 : Requirements Analysis

1. User’s requirements User Story Functional or Non-functional Customer or Admin Roles Explanation I want to use a website that has an appealing appearance and feel since I am a consumer. The website's text, graphics, and other content should all be understandable and crystal clear. Non-functional Customer Roles This is really significant since it affects how website users feel about their experiences. A website that is appealing, accessible, intuitive, and easy to use may improve user experience and draw in more visitors. I want my program to encrypt the login credentials when a new user is created as the operation manager in order to protect everyone's information. Admin Roles This feature is a crucial development for cyber security. The encrypted data would shield the system against brute force attacks for hundreds of years if a hacker managed to sneak past the firewall and gain access. If I request a purchase as a customer, I want the website to take me to the login request page if I'm not currently signed Functional Customer Roles Each shopping cart has a specific customer profile attached to it. Therefore, the user must first log in with a customer account before adding an item to the cart. The user should visit the checkout page after

administrator. Additionally, incorporating "Controller" sites with UI makes it easier for the administrator to complete the task while using them. I want the admin page to have a login and logout button so that as an admin, I can't access it without logging in. Admin Roles This feature would make it easier for administrators to access the administrative features from the homepage. In addition to the delete, update, insert, and choose options, I as an admin also want the administration page. If the admin chooses not to display items in the user interface, I also want options that will prevent categories, brands, suppliers, or products from appearing. Admin Roles This feature aids the administrator in conducting thorough administration of the user interface and product information. I want some information about a product to show when my mouse is over an image of it. Admin Roles The product index page's list of items would only include images of the products; adding this feature would allow users to learn more about the products without overcrowding the page with text and detracting from the website's aesthetics.

2. Use case diagram 2.1. Use case 2.2. Use Case specification 2.2.1. UC- 1 User case name: User Sign up ID: UC- 1 Priority: High The use case description is as follows : the user want to log into the system in order to access particular features. Actor: User