ICT ACADEMY OF KERALA CERTIFIED SPECIALIST IN FULL STACK DEVELOPMENT Project report on ICTAK WEBSITE Submitted by GROUP 1 Abhinav K M Akhil P Nair Aneena Joy Renil Aneesh CONTENTS Sl No Name I Team Number II Work Allocation III Abstract IV Introduction V System Design a) DFD b) Flow Chart c) Mindmap VI System Implementation a) Front End Development b) Back End Development VII Testing VIII Hosting IX Results X Conclusion ICTAK WEBSITE I. TEAM NUMBER : 1 Members 1. Abhinav KM 2. Akhil P Nair 3. Aneena Joy 4. RenilAneesh II. WORK ALLOCATION Abhinav K M Flowchart, admin component, rich text editor, automated brochure Akhil P Nair Mindmap, form validations, admin details listing, authentication RenilAneesh DFD, automated emailing, routing, creation of guards Aneena Joy Design templates, report III. ABSTRACT The objective is to create a MEAN stack application, an ICTAK website that can serve as a platform to serve digital content in an easily accessible manner to all kind of users. Modern frameworks such as React and Angular are well suited for this task. Courses are segregated as corporate, retail and institutional courses based on the role of the users. The admin is responsible for adding or modifying course contents, ICTAK events. The administrators are also notified of user actions such as registration of courses, contact form registration, event registration etc. After each of these registration procedures, corresponding email verification messages need to be generated. An API server running in the backend is used to facilitate the various operations. IV. INTRODUCTION The project, ICTAK website facilitates a variety of users such as retail, institutional or corporate. The services provided differ based on the type of the account. All users are able to access relevant courses, provided they have registered for it. Registrations are under the purview of administrators who can review the requests; the person registering is provided a brochure of all the relevant details. Being a MEAN Stack application, the frontend (Angular) is seamlessly integrated with a robust backend (Node.js), features such as Angular form validation and two way communication makes real time form validation simple, a rich text editor allows the user to format their input to their preferences. Account credentials and course information are hashed and stored in MongoDB database. All the routes and pages are only accessible if the user has sufficient authorization which is ensured using route guards and services, with admin having the highest level of permissions. Digital content such as videos and study material are stored securely and are not accessible to a person without authorization. Emailing services are provided so that the user is notified of any changes as well as their actions such as registration, changing of passwords etc. The application is served using a reverse proxy server such as Nginx. V. SYSTEM DESIGN a) DFD b) Flowchart c) Mindmap VI. SYSTEM IMPLEMENTATION a) Frontend Development Front-end development is everything involved in programming the user interface of a web application. Typically it refers to the Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript portion of web site production as opposed to the database or server- side programming. It encompasses everything from building a simple page of HTML text to creating complex, responsive websites designed to be accessed via different browsers, devices and screen sizes. The frontend is developed using Angular, which is a platform and framework for building single- page client applications using HTML and TypeScript. Angular is written in TypeScript.The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular application is defined by a set of NgModules. The Angular application has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. The application also contains many functional modules.Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects the application data and the DOM. Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to the program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in the program data.The Angular Router NgModuleis used to define a navigation path among the different application states and view hierarchies in the application. b) Backend Development The backend of a web application is an enabler for a frontend experience. The backend of an application is responsible for things like calculations, business logic, database interactions, and performance. Most of the code that is required to make an application work will be done on the backend. Backend code is run on the server, as opposed to the client. Server side: NodeJS is a run time environment of a programming language. It is server-side, packaged software that contains predefined processes to accomplish specific tasks. It is built on the V8 JavaScript engine, which is used to compile and execute JavaScript source code. The code is initially passed to the V8 JavaScript engine. The V8 JavaScript engine then compiles the script and passes the result of the compilation back to Node.js where it can be used in the application. The required functionalities are imported from Node Package Manager (NPM). All APIs of Node.js library are asynchronous (i.e., non-blocking), so a Node.js-based server does not wait for the API to return data. The server calls the API, and in the event that no data is returned, the server moves to the next API. The Events module of Node.js helps the server get a response from the previous API call. This also helps with the speed of Node.js.Node.js dramatically reduces the processing time while uploading audio and video files. Node.js applications never buffer data and simply output the data in chunks.Node.js makes use of a single-threaded model with event looping. As a result, it can provide service to a much larger number of requests than traditional servers like Apache HTTP Server.Node.js server responds in a non-blocking way, making it highly scalable in contrast with traditional servers, which create limited threads to handle requests. Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications.It's a layer built on the top of the Node.js that helps manage a server and routes. It facilitates the rapid development of Node based Web applications. It allows setting up middlewares to respond to HTTP Requests. It defines a routing table which is used to perform different actions based on HTTP Method and URL. It also allows dynamical rendering of HTML pages based on passing arguments to templates. Database: The database used in this application is MongoDB, which is a document-oriented NoSQL database used for high volume data storage. Instead of using tables and rows as in the traditional relational databases, MongoDB makes use of collections and documents. Documents consist of key-value pairs which are the basic unit of data in MongoDB. Collections contain sets of documents and function which is the equivalent of relational database tables. VII. TESTING Software testing is the process of evaluating and verifying that a software product or application does what it is supposed to do. The benefits of testing include preventing bugs, reducing development costs and improving performance. For ensuring the proper working and better utilization of the ICTAK Website, we had gone through the testing and evaluation of each and every module of the ICTAK website. The testing of the project is divided on the basis of several phases in which a user or admin undergoes while using the website. Phases include user/admin registration phase, user/admin login phase, course registration phase and so on. The details about each and every module and its evaluation are described below. User/Admin Registration phase: Separate Module is created for each admin and user based on their role and operations. Registration module is created for the user registration operation. A reactive form is created inside the html file of the registration component. The form consists of basic user details field such as name, course selected, etc. Each of the input field is validated successfully. The basic javascript written inside the ts file of registration component is also ensured with proper working. After the registration a confirmation mail will be sent to the registered mail id, the working of which is also verified successfully. Login phase: After the successful completion of the registration phase, next important phase is the login phase of the user. After login, the homepage view of each user is different, that is the courses may differ based on the role of the user. The login form is created with user ’ s registered email address and password as input filed. The two-input filed validation along with login and logout operation of different registered users is validated successfully. A test case say, user with mail id other than the registered one or invalid password is also executed and verified successfully. Admin Module: ICTAK Website is completely handled by the admin team via their special privileged actions. Hence for the proper working of the website, the admin module working without any error is compulsory. The admin can perform several operations on the course component, ie create course, edit course, delete course without changing any underlying code in the corresponding source code. These operations are called CRUD (Create Read Update Delete) operations and the admin performance is enhanced through the usage of rich text editor where the admin can manipulate the course content so easily. The major admin functionalities considered here are: Add Course: Admin can add course simply by using this functionality. After clicking the “ add course ” button the admin can add course details and update the existing course dashboard with new additional courses which is verified successfully. Edit Course Admin can successfully edit course details such as their duration, fee and other details. They can also edit the appearance and outlook via rich text editor. The edit functionality is also executed successfully. Delete course Delete course button enables the deletion of the existing courses, which is also executed and verified properly. View Course At any stage, the admin can view the current status of the course via the View course button functionality. The admin functionalities like add course, edit course by changing their content, outlook, structure and delete course are executed and verified successfully for the proper validation. Course Module: ICTAK website provide several courses which come under three categories, say institutional courses, corporate courses and retail courses based on the user role. The course module provides the detailed descriptions of such courses. This module is executed and verified successfully. Events Module ICTAK Event registration is handled by the Event module. The main events which are taken into considerations are ICSET and Techalthon. Details of these events along with the corresponding form for registration is executed and validated successfully. Offering module: Partnership and membership details are provided via this module. The partnership application form and Membership application form which include separate application form for academic and corporate users are validated successfully. After the successful submission of the form an email message is generated to the user for confirmation using the email generation module. Excel details module The admin is able to get all the registration details of users who have registered for the courses, ICTAK events, ICTAK offerings such as membership and partnership registration. The admin can download all those details in the admin dashboard in an excel file format. Retrieving registered user details in Excel file format is verified successfully. TEST CASES The table below shows the major test cases considered in this ICTAK website designing project. Module Fields/component Valid/Invalid Expected Result Remarks Login Username and password (Login Component) Valid Registration successful Success Invalid Message displayed to the User Error User registration Personal and Academic Details (Registration Component) Valid Registration successful Success Invalid Message displayed to the User Error Course registration Personal, Academic and course details (Course Component) Valid Registration successful and confirmation email along with course brochure download link sent to user Success Invalid Message displayed to the User Error Event Registration (ICSET, Techathlon) Personal and Event details. (Event Component) Valid Registration successful and confirmation Email is sent to user. Success Invalid Message displayed to the User Error Offering Registration (Membership, Partnership) Personal and Offering details. (Offering Component) Valid Registration successful and confirmation Email is sent to user. Success Invalid Message displayed to the User Error Contact us Personal details (Contact Us component) Valid Registration successful and confirmation Email is sent to user. Success Invalid Message displayed to the User Error VIII. HOSTING Amazon Web Services offers cloud web hosting solutions that provide businesses, non-profits, and governmental organizations with low-cost ways to deliver their websites and web applications. AWS offers a wide-range of website hosting options. With AWS, you can use whatever CMS you like, including WordPress, Drupal, Joomla, and more. AWS also supports and provides SDKs for popular platforms like Java, Ruby, PHP, Node.js, and .Net. Your customers can be anywhere in the world. With AWS you can have a data center or CDN hosting your website in any geography you choose with just a few mouse clicks. Website traffic can fluctuate a lot. From quiet times in the middle of the night, to campaign driven, social media sharing traffic spikes, AWS infrastructure that can grow and shrink to meet your needs. AWS only charges you for the resources you use, with no up-front costs or long-term contracts. AWS has web hosting options that offer pay-as-you-go pricing or fixed monthly pricing. IX. RESULTS Fig 1. Home Page Fig 2. Courses Page Fig 3. Course Registration Form Fig 4. Confirmation Email Fig 5. Events Page Fig 6. Admin Login Form Fig 7. Admin Courses View Page Fig 8. Admin Edit Course Page Fig 9. Admin view of registrations Fig 10. Admin Events View Page Fig 11. Admin Add Event Form Fig 12. New Course Added Fig 13. Admin Edit/Delete Options for Added Courses X. CONCLUSION A MEAN stack application has been developed for ICTAK that can serve as a platform to serve digital content in an easily accessible manner to all kind of users. Courses are segregated as corporate, retail and institutional courses based on the role of the users. The admin can add, delete and modify course contents and ICTAK events. The administrators are notified of user actions such as registration of courses, contact form registration, event registration etc. After each of these registration procedures, corresponding email verification messages are generated. An API server running in the backend is used to facilitate the various operations.Being a MEAN Stack application, the frontend (Angular) is seamlessly integrated with a robust backend (Node.js), features such as Angular form validation and two way communication makes real time form validation simple, a rich text editor allows the user to format their input to their preferences. Account credentials and course information are hashed and stored in MongoDB database.