–
Student Name
:
Nguye
n
Tien Hoai
Student ID :
001284203
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
This report provides a comprehensive comparison of relational database management systems (rdbms) and nosql databases, highlighting their strengths and weaknesses. It also examines the xampp and mevn development stacks, discussing their key components and functionalities. The report delves into the core concepts of web programming, including database technologies, frontend and backend development, and relevant libraries and tools. It concludes with recommendations for expanding system functionality, optimizing performance, and exploring advanced concepts in web development.
Typology: Cheat Sheet
2023/2024
1 / 38
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download Database & Development Stack Comparison for Web Programming and more Cheat Sheet Technology in PDF only on Docsity!
Student Name : Nguyen Tien Hoai
Student ID : 001284203
Table of Figures
Figure 1: Vue.js task 1 ................................................................................................................................. 15 Figure 2: Vue.js task 2 ................................................................................................................................. 16 Figure 3: Vue.js task 3 ................................................................................................................................. 17 Figure 4: Vue.js task 4 ................................................................................................................................. 18 Figure 5: Vue.js task 5 ................................................................................................................................. 19 Figure 6: Vue.js task 6 ................................................................................................................................. 20 Figure 7: Vue.js task 7 ................................................................................................................................. 21 Figure 8: Vue.js task 8 ................................................................................................................................. 21 Figure 9: Vue.js task 9 ................................................................................................................................. 22 Figure 10: Vue.js task 10 ............................................................................................................................. 22 Figure 11: “New” view page ....................................................................................................................... 24 Figure 12: “Words” page, show list of words ............................................................................................. 25 Figure 13: Code lines to programming “Words” page ................................................................................ 27 Figure 14: Detail of the word that user click “Show” .................................................................................. 27 Figure15: Code to program “Show” page ................................................................................................... 28 Figure 16: “Edit word” page pop-up for user to edit the word .................................................................. 29 Figure 17: Code to program “Edit word” page ........................................................................................... 30 Figure 18: A notification pop-up to ensure that user want to delete a word ............................................ 31 Figure 19: When user confirm to detele, the word will no longer at Words page and there’s a notification show that “Word deleted successfully”. ..................................................................................................... 31 Figure 20: Where I linked CRUD function in backend(Create, Read, Update, Delete) ............................... 32 Figure 21: Backend and Frontend code folder............................................................................................ 33 Figure 22: vocabController.js file, where CRUD function mainly be programmed .................................... 34 Figure 23: vocabModel.js file ...................................................................................................................... 35 Figure 24: vocabRouter.js file ..................................................................................................................... 36 Figure 25: server.js file ................................................................................................................................ 37 Figure 26: vocab.json file, a backup Database ............................................................................................ 38
1. Introduction
The report compares RDBMS and NoSQL database systems, the XAMPP and MEVN stacks, and major technologies used in current web development. It discusses backend, frontend, databases, popular libraries, tools, and cloud technologies. The paper finishes with an evaluation of a demo web system, which is useful for both students and professionals in web programming.
2. RDBMS & NoSQL Comparison
This section examines the two main categories of database management systems (DBMS): Relational Database Management Systems (RDBMS) and NoSQL databases. Understanding the differences between these approaches is crucial for choosing the right database solution for a particular application.
2.1 Introduction to RDBMS Relational Database Management This report delves into the core concepts of web programming, focusing on the comparison of database management systems (RDBMS and NoSQL), development stacks (XAMPP and MEVN), and a detailed discussion of relevant technologies. The report aims to provide a comprehensive understanding of these concepts, their advantages, disadvantages, and practical applications. Systems (RDBMS) are a traditional database approach where data is stored in structured tables with defined columns and rows. These tables are interconnected based on relationships, forming a unified structure (Elmasri & Navathe, 2011). Key Features of RDBMS:
- Structured data: Data is organized into predefined tables with rows and columns, adhering to a fixed schema.
- Relational Model: Relationships between tables are defined using primary keys and foreign keys, ensuring data integrity and consistent relationships.
- SQL Query Language: RDBMS utilize Structured Query Language (SQL) for data manipulation, retrieval, and management, ensuring compatibility and portability across different RDBMS.
- Data Integrity and Consistency: RDBMS emphasize data integrity through ACID properties (Atomicity, Consistency, Isolation, Durability). These properties guarantee consistent data transactions and minimize the risk of data loss or inconsistencies (Abiteboul et al., 1995).
- Examples: MySQL, PostgreSQL, Oracle Database, Microsoft SQL Server 2.2 Analysis and Evaluation of RDBMS Advantages of RDBMS:
- Data Integrity: ACID properties ensure data accuracy and consistency, minimizing errors and data corruption (Elmasri & Navathe, 2011). This makes them well-suited for applications demanding high data reliability, such as banking and financial systems.
- Data Relationships: The relational model excels at representing complex relationships between data, allowing for efficient querying and data analysis.
- Data Security: RDBMS systems offer robust security measures like user authentication, access control, and data encryption to protect sensitive database data.
- Scalability: RDBMS can scale vertically by increasing processing power or memory on the same server, providing scalability for large datasets, but achieving optimal vertical scalability may be more challenging.
- Mature Technology: RDBMS are well-established, supported by a mature ecosystem of tools, documentation, and expertise, contributing to a lower learning curve and greater ease of maintenance. Disadvantages of RDBMS:
- Limited ACID Compliance: Many NoSQL databases prioritize availability and partition tolerance over strong consistency, potentially leading to data inconsistencies in certain scenarios (Perkins & Lacey, 2012).
- Complex Data Modeling: Designing efficient data models in NoSQL can be challenging due to the lack of rigid schemas and the need to consider data distribution and query patterns (Fowler, 2012).
- Limited Query Capabilities: NoSQL databases typically offer less sophisticated query capabilities compared to relational databases, making complex data analysis and reporting more difficult (Perkins & Lacey, 2012).
- Immature Ecosystem: The NoSQL ecosystem is still evolving, with fewer mature tools and libraries available compared to relational databases (Perkins & Lacey, 2012).
2.5 Main Differences Between RDBMS and NoSQL
Feature Relational Database Management System (RDBMS) NoSQL Database Data Model Structured, tabular data with predefined schemas Flexible data models Scalability Vertical scaling Horizontal scaling ACID Compliance Strong ACID compliance (Atomicity, Consistency, Isolation, Durability) Often weaker ACID guarantees Performance Generally slower for large datasets and high write throughput Typically faster for large datasets and high write throughput Use Cases Complex joins, transactions, data integrity, and reporting Large volumes of unstructured or semi- structured data, high write throughput, real-time analytics
3. XAMPP & MEVN stack comparison
3.1 XAMPP
Introduction: XAMPP is a cross-platform web server solution stack package that combines Apache HTTP Server, MySQL database, PHP, and Perl scripting languages for easy local web server setup.
Analysis and Evaluation: XAMPP is a popular tool for creating dynamic websites and web applications, but its simplicity may limit its scalability and customization options for complex projects. Advantages: Easy installation All-in-one package Cross-platform compatibility Suitable for small to medium-sized projects Disadvantages: Potential security risks if not configured properly Limited scalability for large-scale applications May not be ideal for production environments
3.2 MEVN Stack
Introduction: The MEVN stack is a JavaScript-based full-stack development framework comprising MongoDB, Express.js, Angular, and Node.js. It is specifically designed for building modern, dynamic web applications using JavaScript technologies. Analysis and Evaluation: MEVN provides a cohesive development experience using JavaScript, ideal for single-page and real-time applications, but may have a steeper learning curve for developers unfamiliar with JavaScript frameworks. Advantages: Isomorphic JavaScript High performance Scalability Large and active community Disadvantages: Steeper learning curve Less mature than some other full-stack frameworks Potential for over-engineering small projects
4. Technology discussion
4.1 Backend Technology: Node.js and Express.js
Node.js is a cross-platform JavaScript runtime environment that executes code outside a web browser, using a non-blocking, event-driven I/O model for efficient concurrent connection handling. Express.js is a Node.js web application framework that simplifies routing, request handling, middleware, and view rendering for web and mobile applications.
- Strong community support and a growing ecosystem of libraries and tools.
- Versatile for building various types of applications (SPAs, PWAs, hybrid apps). Cons of Vue.js :
- Smaller ecosystem compared to React and Angular.
- Some complexities in large-scale applications due to its flexibility. 4.3 Database Technology: MongoDB MongoDB is a popular NoSQL document-oriented database that offers scalability, ease of development, and is suitable for handling large volumes and complex data structures. Pros of MongoDB :
- Scalability and high performance.
- Flexible data modeling without rigid schemas.
- Easy to integrate with Node.js applications.
- Supports indexing and querying for efficient data retrieval. Cons of MongoDB :
- Weaker ACID guarantees compared to relational databases.
- Complex query patterns can be challenging.
- Limited support for complex joins and transactions. 4.4 Popular Libraries: Mongoose, Body-Parser, Axios, CORS
- Mongoose : Mongoose is an ODM library that defines objects with schemas mapped to MongoDB documents, acting as an abstraction layer, similar to Express for Node.js.
- Body-Parser : Middleware for parsing incoming request bodies in Node.js applications, typically used for handling JSON and URL-encoded data.
- Axios : Promise-based HTTP client for making requests to RESTful APIs.
- CORS : Cross-Origin Resource Sharing middleware for enabling cross-origin HTTP requests. 4.5 Used Tools: Visual Studio Code, Studio 3T
- Visual Studio Code : A free, open-source code editor developed by Microsoft, widely used for web development.
- Studio 3T : A MongoDB GUI client for managing and querying databases.
4.6 Cloud Technology: Mongo Atlas, Render, Vercel
- Mongo Atlas : A cloud-based database service for MongoDB, offering managed deployments, scaling, and security.
- Render : A platform for deploying web services and static sites.
- Vercel : A platform for frontend development and deployment, especially for React, Next.js, and Vue.js applications.
Evaluation
Project Overview:
This project aimed to develop a fully functional vocabulary management application encompassing both frontend and backend components. The application utilizes the MEVN stack
- MongoDB, Express.js, Vue.js, and Node.js – to enable users to create, view, edit, and delete vocabulary entries across different languages.
Evaluation of Frontend:
Strengths:
- Intuitive User Interface: The Vue.js-based frontend offers a user-friendly interface for managing vocabulary entries, utilizing Semantic UI CSS for a visually appealing and responsive layout.
- Data Binding and Reactivity: Vue.js's data binding and reactivity features provide a seamless experience, updating the UI in real-time as data changes. This enhances the application's interactivity and responsiveness.
- Routing: Vue Router manages navigation between different views (New, Words, Show, Edit) effectively, creating a smooth user experience.
- Component-Based Architecture: The application leverages a well-structured component-based architecture, leading to cleaner code, better reusability, and easier maintenance.
- API Integration: Vue.js's data binding and reactivity features enhance the application's interactivity and responsiveness by updating the UI in real-time with data changes.
- Limitations:
- Data Validation: While the backend performs validation, the frontend lacks input validation, potentially allowing invalid or incorrect data types to be submitted.
- Error Handling: The frontend currently lacks robust error handling. In case of API failures, a more user-friendly error message is needed to guide the user.
proficiency in the chosen technologies. However, both components have notable limitations that need to be addressed for a truly robust and complete application.
Future Development Recommendations:
The future development plan includes prioritizing security, improving scalability, improving data validation, enhancing error handling, adding search and filtering, exploring additional features, implementing testing, and implementing a robust logging system for debugging and analysis. These recommendations aim to enhance the user experience, handle larger datasets, improve data validation, provide clear feedback, and enhance functionality with advanced search capabilities.
Conclusion
This report compares database management systems (RDBMS and NoSQL), development stacks (XAMPP and MEVN), and technologies for web programming. It highlights the strengths of each system, such as data integrity and relationship management, and the differences between XAMPP and MEVN. The report also discusses the key components of modern web application development environments, including backend, frontend, database, libraries, tools, and cloud technologies. It concludes with an evaluation of a demo web system.
Future Recommendations
This project provides a foundation for future web programming development. Recommendations include expanding system functionality, optimizing performance, strengthening security, exploring advanced concepts like microservices architecture and serverless computing, diving into different technologies like databases and frontend frameworks, and contributing to opensource projects. These improvements aim to enhance the web application's capabilities, improve scalability and performance, and foster collaborative learning and real-world application of acquired skills.
References (Havard referencing style)
- Abiteboul, S., Hull, R., & Vianu, V. (1995). Foundations of Databases. Addison-Wesley Longman Publishing Co., Inc.
- Elmasri, R., & Navathe, S. B. (2011). Fundamentals of Database Systems. Pearson Education.
- Fowler, M. (2012). NoSQL Distilled: A practical guide to using NoSQL databases. Addison-Wesley.
- Professional. Perkins, C., & Lacey, E. (2012). Learning NoSQL: MongoDB, Cassandra, CouchDB, and Redis. O'Reilly Media. Wikipedia. (2023). NoSQL.
- Xampp tutorial - javatpoint www.javatpoint.com.
- MEVN stack tutorial: Build a CRUD app using Vue 3, Node, Express & MongoDB (2022) SigNoz.
- Node.js - introduction to node.js Node.js -.
- MozDevNet Express/node introduction - learn web development: MDN , MDN Web Docs.
- Body-parser , npm. (Accessed: 19 August 2024).
- GeeksforGeeks, MongoDB: An introduction , GeeksforGeeks.
- Vue.js , Introduction | Vue.js.
- Www.naukri.com, Introduction to Mongoose.
- Promise based HTTP client for the browser and node.js , Axios.
- Cors , Express cors middleware.
Appendices
Evidence of weekly lab tasks
Vue.js
Task 1: The Vue Instance
Figure 2: Vue.js task 2
- index.html: This file sets up the basic HTML structure, includes necessary scripts (Vue.js), and defines the div element with the id app where Vue will mount its components.
- main.js: This file contains the main Vue instance, where i define data, methods, and other components. Task 3: Conditional rendering
Figure 3: Vue.js task 3 Core Concepts:
- v-if directive: This directive conditionally renders an element based on the truthiness of an expression.
- v-else directive: Used in conjunction with v-if, it renders an alternative element if the vif condition is false.
- v-else-if directive: Provides additional conditional checks between v-if and v-else.
- v-show directive: Similar to v-if, but the element is always rendered, initially hidden, and then shown or hidden based on the expression. In my index.html file, i’m using the v-if, v-else-if, and v-else directives to conditionally render different inventory status messages based on the inventory property in my main.js file.
- v-if inventory > 10: This condition checks if the inventory is greater than 10 and displays "In Stock" if true.
- v-else-if inventory > 0: This condition checks if the inventory is greater than 0 but less than or equal to 10 and displays "Inventory Almost sold out" if true.
- v-else: This is the default case, displayed when neither of the previous conditions is met, indicating "Out of Stock".
Figure 5: Vue.js task 5
- v-on directive: This directive is used to attach event listeners to elements in my template. It's often shortened to @ for convenience.
- Event handlers: These are functions defined in my Vue component that are executed when the corresponding event occurs.
- Event modifiers: Vue provides several modifiers to modify event behavior, such as .prevent to prevent default behavior, .stop to stop event propagation, and .capture to capture the event before it reaches inner elements. Task 6: Class and style binding
Figure 6: Vue.js task 6 Task 7: Computer properties