BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT 1 UNIT WEBSITE DESIGN DEVELOPMENT STUDENT NGUYEN TRINH ANH TUAN CLASS IT05102 STUDENT ID BD00096 SUPERVISOR NGUYEN HOANG ANH VU DANAN.
BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT UNIT:WEBSITE DESIGN & DEVELOPMENT STUDENT CLASS STUDENT ID SUPERVISOR : NGUYEN TRINH ANH TUAN : IT05102 : BD00096 : NGUYEN HOANG ANH VU DANANG,AUGUST 2022 ASSIGNMENT FRONT SHEET BTEC Level HND Diploma in computing Qualification Unit number and title Unit:WEBSITE DESIGN & DEVELOPMENT Submission date Date received (1stsubmission) Re-submission date Date received (2ndsubmission) Student name NGUYEN TRINH ANH TUAN Student ID BD00096 Class IT05102 Assessor name Nguyen Hoang Anh Vu Student declaration I certify that the assignment submission is entirely my own work and I fully understand theconsequences of plagiarism I understand that making a false declaration is a form of malpractice Student’s signature: NGUYEN TRINH ANH TUAN P1 P2 P3 P4 i Performed student : Nguyen Trinh Anh Tuan ❒ Summative Feedbacks: ❒Resubmission Feedbacks: Grade: Assessor Signature: Date: Internal Verifier’s Comments: Signature & Date: i Performed student : Nguyen Trinh Anh Tuan ACKNOWLEDGMENTS First of all, I would like to thank my teacher Nguyen Hoang Anh Vu for always supporting me in my studies and research, for my patience, motivation, enthusiasm and rich knowledge His enthusiastic guidance has helped me throughout the time of researching and writing this thesis Without your wonderful help, I would not have been able to achieve this Besides the teacher, I would like to thank the friends who helped me improve my subject knowledge Not only that, they are always there to support me when I need it And besides, I would like to thank the school for creating all conditions for me to have all the facilities to help me complete my work well Finally, I would like to thank my family: my parents, who gave birth to me from the beginning and always supported me mentally They are always behind to care and give me more motivation to well i Performed student : Nguyen Trinh Anh Tuan ASSURANCE I declare that this is my work, based on my research, and that I have recognized all materials and sources utilized in its production, including books, papers, reports, lecture notes, and any other type of document, electronic or personal communication I further declare that I have not previously submitted this assignment for assessment in any other unit, except where explicit permission has been granted by all unit coordinators involved, or at any other time in this unit, and that I have not duplicated or stolen ideas from the work of others in any way Declaration of the learner I verify that the work I've submitted for this assignment is all my own, and that all research sources have been properly credited Signature of the student: Date: TUAN i Performed student : Nguyen Trinh Anh Tuan TABLE OF CONTENT ASSIGNMENT FRONT SHEET i ACKNOWLEDGMENTS iii ASSURANCE iii TABLE OF CONTENT v LIST OF TABLES AND FIGURES vii INTRODUCTION viii B CONTENT ix I IDENTIFY THE PURPOSE AND TYPES OF DNS, INCLUDING EXPLANATIONS ON HOW DOMAIN NAMES ARE ORGANISED AND MANAGED (P1) ix - Website ix - How the website works? ix - Domain Name System x What is domain name? x How the domain names are organised and managed? x What is Domain Name System? x DNS xi How does DNS work xvi II EXPLAIN THE PURPOSE AND RELATIONSHIPS BETWEEN COMMUNICATION PROTOCOLS, SERVER HARDWARE, OPERATING SYSTEMS AND WEB SERVER SOFTWARE WITH REGARDS TO DESIGNING, PUBLISHING AND ACCESSING A WEBSITE (P2) xvi Internet Protocol Suite xvi Protocol Stack xvii Transmission Control Protocol (TCP) xvii i Performed student : Nguyen Trinh Anh Tuan Internet Protocol (IP) xviii Hypertext Transfer Protocol (HTTP) xviii File Transfer Protocol (FTP) xviii Secured Shell (SSH) xix Simple Mail Transfer Protocol (SMTP) xix Domain Name System (DNS) xx Internet Message Access Protocol (IMAP) xx POP3 protocol .xxi Simple Network Management Protocol (SNMP) xxi Server hardware xxi Operating systems xxvi Web server software xxvii Relationship between communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website xxxii Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to presentation and application layers.(P3) xxxii 1.1.1 Front End [6] xxxiii 1.1.2 Back End [6] xli 1.1.3 The relationship between Front-end and Back-end [6] lii REFERENCES lxxii i Performed student : Nguyen Trinh Anh Tuan LIST OF TABLES AND FIGURES Figure 1Website ix Figure 2How the website works ix Figure 3Domain Name System x Figure 4How the domain names are organised and managed x Figure 5What is Domain Name System xi Figure 6How does DNS work xvi Figure 7Internet Protocol Suite xvii Figure 8Protocol Stack xvii Figure 9Transmission Control Protocol (TCP) xvii Figure 10Internet Protocol (IP) xviii Figure 11Hypertext Transfer Protocol (HTTP) xviii Figure 12File Transfer Protocol (FTP) xix Figure 13Secured Shell (SSH) xix Figure 14Telnet .xix Figure 15Simple Mail Transfer Protocol (SMTP) xx Figure 16Domain Name System (DNS) xx Figure 17Internet Message Access Protocol (IMAP) xx Figure 18POP3 protocol xxi Figure 19Simple Network Management Protocol (SNMP) xxi Figure 20- Server hardware Error! Bookmark not defined Figure 21- Operating systems xxvii Figure 22- Web server software xxvii i Performed student : Nguyen Trinh Anh Tuan INTRODUCTION IT subject helps me understand more about programming How to create applications Help me know more about computers i Performed student : Nguyen Trinh Anh Tuan B CONTENT I IDENTIFY THE PURPOSE AND TYPES OF DNS, INCLUDING EXPLANATIONS ON HOW DOMAIN NAMES ARE ORGANISED AND MANAGED (P1) - Website Website, also known as website, is a collection of sub-sites, including text, images, videos, flash, etc WEBSITE is only located in a domain name or subdomain hosted on servers running online on the World Wide transmission of the Internet Figure 1Website - How the website works? To easily visualize how a website works, you can refer to the diagram below (as if the website is installed on a separate server) First, the user enters the browser an address of the form: https://hocban.vn, actually you just need to type "lapo.vn" and the browser will understand and change it to the link above The browser sends a request to the DNS server The DNS system returns the results of the domain name analysis in the sent link, which is lapo.vn, it has a server address of 210.212.143.153 (this is already assigned at registration, the DNS server just needs to remember) After receiving the IP address - where to get the data, the browser will find the received IP address the server containing the website content The web server receives the request to retrieve the website content and it sends a set of files including HTML, CSS , other multimedia files such as audio, images (if any) to the browser; The browser "translates" the files that the server has sent into the web page we see on the screen Figure 2How the website works i Performed student : Nguyen Trinh Anh Tuan Figure 60 Developer of Frontend vs Backend ➢ Essentials of Frontend vs Backend Currently, the recruitment needs of companies are increasing, in addition, Front-end or Back-end programmers are also gradually mastering the remaining areas, not just following the initial orientation That makes businesses prioritize hiring Full-stack Developers rather than hiring different Developers, helping to improve the consistency in the working process, so Full-stack Developer is becoming one of the trends targeted by many people You can also see that Full-stack Developer is a combination of Front-end and Back-end work, so you need to be familiar with both Front-end and Back-end languages, and must have logical thinking and aesthetic eye to create really good products Some of our sharing about the current web programming industry hope to help you choose the best path for yourself, whether you learn front-end or back-end programming, of course the best is you should still aim to become a Full-stack Developer Figure 61 Essentials of Frontend vs Backend ➢ Summary By now, the difference between the frontend and backend should be more evident, as well as the different activities carried by developers that work on both ends of the wire In practical terms, the frontend means the browser and the backend, the server or, more recently, the cloud i Performed student : Nguyen Trinh Anh Tuan If you like user interfaces, are keen on sound design and like the visual aspects of creating apps, then perhaps you would be most interested in becoming a front end software developer The frontend is exciting not only visually, but also from a programming standpoint; you will spend endless hours writing logic that will make your site look and behave the way the designers intended If you like to spend your time solving business problems, writing algorithms, working in the cloud, and creating services and APIs, then backend development is for you.If you enjoy both and feel equally excited and comfortable with all aspects of web application creation, then a career as a full-stack developer is what you want Whatever path you choose, there has never been a better time to be a software developer Figure62 Summary 1.1.3.2 How Front-End and Back-End Relate To Presentation And Application Layer In software engineering, the terms front-end and back-end refer to the separation of concerns between the presentation layer (user interface) and the data access layer (later ending) of a piece of software, or physical or hardware infrastructure In the client-server model, the client is usually considered the front end and the server is often considered the back end, even if some of the presentation work is actually done on the server itself Figure 63 Three-layer model The presentation layer establishes the way in which information is presented, typically for display or printing Data encryption and character set conversion (such as ASCII to EBCDIC) is usually i Performed student : Nguyen Trinh Anh Tuan associated with this layer The primary reason for someone to attend a class is that the presentation of information is designed to help that person learn Students could, theoretically, pick up the literature and learn the material on their own however, the value comes with the instructor s interpretation of the material The instructor translates the information in such a way that students understand it The presentation layer provides this functionality in computer systems The presentation layer translates the information in a way that the application layer understands Likewise, this layer translates information from the application layer to the session layer Some examples of presentation layer protocols are SSL, HTTP/ HTML (agent), FTP (server), AppleTalk Filing Protocol,Telnet, and so on Figure 64 The presentation layer The business layer The model performs main tasks including: One is, responding to and processing the data manipulation requirements of the GUI layer It must be completed before transmission to the DAL and saved to the DBMS Second, check constraints, integrity, data validity Before returning the results to the GUI, the BLL will calculate and process the business requirements A data layer The application performs the function of communicating with the DBMS At the same time, participate in data storage and query (search, edit, add, delete, ) Thus, the 3-layer management model works according to the following diagram: GUI associated with BLL and Data Transfer Objects (DTO component belongs to BLL class) BLL links to DAL and DTO The DAL only links to the DTO Each model will have its own structure that makes it different and has outstanding advantages For better understanding, please refer to the detailed updated information in the following sections Figure 65 A data layer i Performed student : Nguyen Trinh Anh Tuan DISCUSS THE DIFFERENCES BETWEEN ONLINE WEBSITE CREATION TOOLS AND CUSTOM BUILT SITES WITH REGARDS TO DESIGN FLEXIBILITY, PERFORMANCE, FUNCTIONALITY, USER EXPERIENCE (UX) AND USER INTERFACE (UI) (P4) 1.5.1 Some of tool to create online website: • wix.com: WIX, often known as Wix.com, is a website platform that allows clients to create online websites entirely by drag and drop What exactly is the WIX platform builder website? WIX works with HTML5 You may create your personal website with a simple procedure Simply sign up for an account and you may utilize WIX's tools to develop your own website • Advantages of Wix: - Many design possibilities before to fully developing the website Whatever business you're in, you may choose a suitable topic for your website from over six hundred designs designed by Wix designers - Easily add animations It is one of the few web designers that allows you to build textual content effects and other elements on the fly -A capable helper will assist you Artificial Design Intelligence (ADI) serves as your assistance in creating your own trademark website For example, it will automatically determine the ideal layout for the target demographic and connect your social media bills to it Disadvantages of Wix: - Templates are not convertable Once your website is live, you are not permitted to discuss any other subject This makes improving the layout of your website much more difficult You may either it manually or start from scratch - More expensive than other online design tools All Wix pricing options are still more expensive than more well-known competitors, such as Weebly and Squidoo Web Design Guide with WIX As we mentioned, WIX is a site that helps users to set up and use the website from the very beginning, even for those who not have much experience and knowledge of the web, so it has i Performed student : Nguyen Trinh Anh Tuan many specific instructions , step-by-step details, and you just have to choose the options that this page offers You can refer to the following steps Step 1: Sign up Go to Wix.com and press the blue “Get Started” button You will be taken to the registration screen where you can create a new admin account or sign up with your Facebook or Google account After creating a new account or linking one of your social media accounts, you'll be taken to a quick questionnaire You can skip this step but it's best to complete it as it will customize the wixsite to best suit your needs Step 2: Design a wix website – Choose a template for your Wix website Click the blue “Get Started Now” button and you will be taken to the templates folder – where you can start browsing through some of the wix website designs The forms you are shown first depend on your answers to the site setup questionnaire You can browse through all the topics until you find something you like, or search by keywords like “food” or “tech” if you are building a site with a specific theme i Performed student : Nguyen Trinh Anh Tuan Step 3: Introducing the Website Builder After selecting a theme and clicking the “Edit” button, you will be taken straight to the drag and drop wixx web page builder Here you will see option boxes that allow you to change the existing formatting settings to unleash your creativity and manipulate any to create a unique website for you Step 4: Use Artificial Design Intelligence (ADI) to create a website using wix The wizard begins by building up the information it already has from the original questionnaire (if you have already filled it out) As you type, the wizard tries to autocomplete what you're typing, so you can choose an appropriate category from what appears This is a design feature on Wix.com that allows you to create your own wix website according to your design goals such as an online store, blog, etc Step 5: Design a web with wix – Customize your Wix site Okay, now that you know how to create a website with the platform and you have a template or ADI page to start with, let's take a look at some of the customizations you can make Let's start by editing the site title You can adjust the look and behavior of the site header by clicking on it The wix software manual will then have a pop-up with buttons to change the header design, settings or design Change design If you click the “Change Header Design” button, you can adjust the color and style of the header A pop-up will list a bunch of designs for you to choose from, and you can then click the “Customize Design” button to make further changes to width, opacity, border, style corners and balls The changes will happen automatically when you click, or you can preview the changes by hovering Step 6: Publish your Wix site When you are happy with your wix web design, click the blue publish button in the top right corner You will then receive a message saying that your site is published, ready to appear on the internet with a direct link to it Step 7: Manage and update your wixx web page i Performed student : Nguyen Trinh Anh Tuan At this point, you can continue with your free account or upgrade to a premium account If you want to remove ads, use your own domain, or function as an online store, you'll have to upgrade You can this at any time by clicking the “upgrade” link in the website builder main menu Wix website upgrade cost Premium plans range from $4.50 to $24.50 a month for basic websites (note, cheapest plan includes ads) or from $17 to $35 a month for business or websites E-commerce with online payments • WordPress.com (Free & Paid): WordPress is an open source tool for publishing blogs and websites developed in the PHP programming language and using the MySQL database WordPress is referred to as a free yet good, simple to use, and widely used CMS all over the world • Advantages of WordPress -Take total control of your website You own and have authority over all data - your website, your content, and the associated data -Use a plethora of pre-made templates It is now simple to customize your website with several free/high-quality WordPress themes to chose from i Performed student : Nguyen Trinh Anh Tuan -Access to over 55k plugins WordPress handles a big number of accessories and plugins to expand your website for practically whatever you desire as your business expands -Easy third-party integration Because WordPress is a domestic brand, you may integrate practically all of the well-known third-party solutions, such as email advertising and marketing platforms, SEO (search engine optimization) tools, payment gateways, and so on • Disadvantages of WordPress: - In charge of dealing with critical internet site characteristics Because you are in charge of your website, you are also in charge of its security, creating backups and upgrades, and searching for online web website hosting -There isn't any built-in drag-and-drop website builder One downside of using WordPress is that it lacks an integrated drag and drop interface Upload any drag and drop plugin, though, and Wordpress will allow you to drag and drop things • Joomla: -Joomla is a free and open source content management system (CMS) developed in PHP and linked to a MySQL database Joomla enables clients to easily publish their content to the Internet or Intranet while also controlling all of their information Joomla is very effective and completely free • Advantages -Joomla's admin interface is sophisticated, yet it is also simple to use and modify -Of the three software programs, Joomla offers the best interface for processing a large number of articles -The Joomla website provides free video education lessons -Joomla supports over 70 translation apps for multilingual content administration -Joomla includes a lightweight PHP framework for developing web and command-line applications in PHP -Primary possibility to monetize your website with advertisements • Defect i Performed student : Nguyen Trinh Anh Tuan - The disadvantage of Joomla is that it is located in the middle of the spectrum It is no longer as efficient and seamless as WordPress, nor is it as developer-friendly as Drupal - If you know you'll need additional features on your website, Joomla isn't the best choice for a CMS The Joomla network provides a large number of modules, however they are more difficult to find and manage 1.6 The difference between online website creation tools and custom built websites has to with design flexibility, performance, functionality, User Experience (UX) and User Interface ( UI) 1.6.1 Basic Concepts • All three regions of internet layout, UI, UX are frequently in a single whole However, we can not say which discipline is much less than which After all, every discipline offers with a extraordinary problem • Web layout: is an enterprise involved with the visible layout and value of the internet site Web layout is a extensive concept It covers UX, UI and lots of different regions • UI (consumer interface layout): that is a part of internet layout The UI enterprise specializes in managing the controls that humans use to engage with a internet site or application It will cowl how buttons and gesture controls are displayed • UX (consumer revel in layout): is every other vicinity of internet layout UX specializes in managing consumer conduct and revel in on a internet site or app -Web design: if a internet site takes too lengthy to load, it is able to incorporate an excessive amount of content material or its content material is just too complex To optimize load times, net i Performed student : Nguyen Trinh Anh Tuan designers can optimize images, alter content material, crop redundant content material, and more -User interface design: the person interface ought to reply as fast as possible Therefore, it ought to be easy sufficient for the interplay to be instantaneous -User enjoy design: the proportion of customers leaving the web website online will boom exponentially with the weight time Therefore, person enjoy designers want to optimize the loading time at the homepage and touchdown web page earlier than fixing the trouble at the whole internet site 1.6.2 Difference between web design, UI design and UX design ❖ Web design: • Web Designers are the human beings chargeable for developing the modern-day trending internet site content They paintings with the format layout, aesthetics, software and capability of a internet site or application • Web Designer looks after many things, together with UI and UX Web designers are tasked with designing an powerful internet site with complete capability, permitting human beings to without difficulty engage through laptop or smartphone Sometimes, Web Designers regularly awareness at the aesthetics of the internet site in preference to the person enjoy • A internet clothier wishes to have in-intensity information of programming languages (HTML, CSS ), scripting languages javaScript and PHP, layout equipment which include Flash, Photoshop • To his activity well, Web Designer wishes to awareness on numerous components which include: Color theory, ideas, creativity, flowcharts, interactions, rotation, drop-down menus, virtual presentation, Call-to-movement buttons, forms, icon development, infographics, typography… • Web Designer's start line may be a visible clothier with the total flair and cappotential to create stunning web sites or programs that meet aesthetic criteria Besides, maximum internet designers not move as deep into person enjoy as UX designers ❖ UI Design • UI stands for User Experience, who's liable for developing the internet site interface in addition to making sure a unbroken interplay among the consumer and the product • User interface designers create interactions among the consumer and the provider or device By enhancing the product toward consumer-friendliness and including price to the consumer Usually, UI Designer works primarily based totally at the interface, layout and the sensation that the product desires to deliver to the consume • UI Designer is liable for turning UX designers' "dreams" into reality So, similarly to the competencies in the use of layout tools, in addition they own the competencies to put in writing code • User Interface Designer (UI Designer) focuses particularly on: Color and typography selection Design: buttons, icons, sliders, scroll bars… Ensure internet site consistency with i Performed student : Nguyen Trinh Anh Tuan fashion guidelines Responsive layout (responsive layout) Parts of interplay On-display screen layout, per-web page layout • User interface layout makes a speciality of the visible additives of the product Including buttons, icons, checkboxes, typography, colors, responsive layout The aim of consumer interface layout is to manual the consumer thru the appearance and experience of an item It is related to a visible conversation method that doesn't require the consumer to purpose too much User interface layout brings logo substances and visible assets to the interface, supporting to fulfill the easy-to-understand, predictable and fashionable nature of the internet site ❖ UX Design • UX stands for consumer revel in layout This is a person who handles a part of the internet layout technique And this technique will begin earlier than the product reaches the patron • UX Designer delves into patron preferences, behaviors, habits, requirements, and emotions Through knowledge clients, knowledge issues comprehensively, UX designers provide affordable answers and optimize issues Discuss the differences between online website creation tools and custom built sites with regards to design flexibility, performance, functionality, User Experience (UX) and User Interface (UI) Comparison criteria Online website creation tool Custom built sites Flexibility Templates are getting more Custom-built sites are flexible sophisticated Site may look and can grow like everyone else’s Performance Pay for website builder Custom-built sites are easier andhosting services at the to update Search engine same time Sites are quite fast optimization is better to implement Some templates aren’t especially well-made or maintained Security can be an issue Functionality limited in your graphics There are no limitations on design and navigation graphics and functionality capability Functionality can Cannot drag or drop Just use be limited in template sites editor to write cod, content i Performed student : Nguyen Trinh Anh Tuan Custom-built sites are necessary for e-commerce User Experience (UX Tools will be useful and will a site works all manner of support you in creating different devices SEO awesome, valuable and optimised and friendly, Can human-centered products support additional They are often cheapper and technology faster to develop than custom built website User Interface (UI Easy to customise Tools have All the features and selection sample By the way if your based on user’s idea It is design skills is not good, the approriate for business tools could help i Performed student : Nguyen Trinh Anh Tuan Critical Evaluation i Performed student : Nguyen Trinh Anh Tuan REFERENCES [1] Arends, R., Austein, R., Larson, M., Massey, D and Rose, S., 2005 DNS security introduction and requirements (pp 1-21) RFC 4033 [2] Kubala, J.P., International Business Machines Corp, 1996 Method and apparatus for providing a server function in a logically partitioned hardware machine U.S Patent 5,564,040 [3] Feller, J and Fitzgerald, B., 2002 Understanding open source software development London: Addison-Wesley [4] Bochmann, G and Sunshine, C., 1980 Formal methods in communication protocol design IEEE Transactions on communications, 28(4), pp.624-631 [5] Dover, D and Dafforn, E., 2011 Search engine optimization (SEO) secrets Wiley publishing [6] Smith, P.G., 2012 Professional Website Performance: Optimizing the Front-End and Back-End John Wiley & Sons [7] Elling, S., Lentz, L and De Jong, M., 2007, September Website evaluation questionnaire: development of a research-based tool for evaluating informational websites In International Conference on Electronic Government (pp 293-304) Springer, Berlin, Heidelberg [8] Cebi, S., 2013 Determining importance degrees of website design parameters based on interactions and types of websites Decision Support Systems, 54(2), pp.1030-1043 i Performed student : Nguyen Trinh Anh Tuan i Performed student : Nguyen Trinh Anh Tuan ... false declaration is a form of malpractice Student’s signature: NGUYEN TRINH ANH TUAN P1 P2 P3 P4 i Performed student : Nguyen Trinh Anh Tuan ❒ Summative Feedbacks: ❒Resubmission Feedbacks: Grade:... database Figure 22 Front-end and back-end 1. 1 .1 Front End [6] 1. 1 .1. 1 What is Front End The process of creating HTML, CSS, and JavaScript for a website or Web application so that a user can view... i Performed student : Nguyen Trinh Anh Tuan Figure 41 Rust Programing language ➢ Web Servers A web server is a server that installs programs that serve web applications Webserver is capable of