In root of C directory create a folder named data and inside that folder create a new folder named db
Now cd into folder C:\Program Files\MongoDB\Server\4.2\bin using command prompt and run the command: mongod
Similarly cd into folder C:\Program Files\MongoDB\Server\4.2\bin using another command prompt and run the command: mongo
Now inside the second command prompt, run the command db and you will see a test DB.
Go into “Advanced System Settings -> Environment Variables -> Path(Under System Variables) -> Edit” and add new path i.e. C:\Program Files\MongoDB\Server\4.2\bin (change your version accordingly)
Now you can run the commands mongod and mongo from any directory.
That’s it. Now we can use MongoDB Compass to manage our MongoDB databases.
In this post, we will learn about components and how to create new components in an Angular 9 application using Angular CLI. We will create the required components for our application and will show how components can be used to organize the content of the application.
What Are Angular Components?
An angular application is built using multiple modular pieces/sections known as components. Every component defines its own HTML, CSS, and data to be displayed on the web page. When the component data is changed then the Angular application updates only that component without reloading the whole web page.
We can think of components as different sections of a web page. In a typical web page, we have a header, footer, and content sections. Similarly in an Angular application, a web page may have 3 components i.e. a header component, footer component, and content component. In most of the cases, the header and footer components remain the same throughout the application and only the content section is updated when the user clicks a particular menu item.
App Component
The app component is automatically created when we created a new Angular application using Angular CLI as we did in the previous post. The app component is comprised of 4 files like any other Angular component. The component files are available inside the folder ‘myapp/src/app’:
app.component.css (used to define CSS styles for the component)
app.component.html (used to define markup for the component)
app.component.spec.ts (used to define tests for the component)
app.component.ts (used to define and prepare data for the component)
Create New Angular Components
To create a new Angular component using Angular CLI, open the command prompt as an administrator and CD into the application folder. Then run the command:
ng generate component header
The above angular command will generate a new angular component named as the header. Go ahead and create two more components i.e. for content and footer sections.
ng generate component content
ng generate component footer
Create new Angular Components – Learn Angular 9 From Scratch
You can find the files of these newly generated components in the folder ‘myapp/src/app’.
In this post, we have learned about Angular components and how to create new Angular components using Angular CLI. In the next post, we will learn how to change the content of Angular components and how to merge these 3 components in the app component. Stay tuned!
In this post, we will have a demo of our learning management system known as UniLMS which is shipped as a WordPress plugin. We will discuss the main features, modules, and components of the plugin. We will also test the modules and features of the plugin by creating dummy data.
What is UniLMS?
UniLMS is a learning management system developed for universities, schools, colleges, academies or any other type of institutes to manage their day-to-day activities. The software is shipped as a plugin that can be used on any WordPress website.
Modules/ Components of UniLMS
Following is a list of main modules/ components of UniLMS plugin
Dashboard Module
Students Module
Teachers Module
Classes Module
Courses Module
Course Files Module
Activities Module
Quizzes Module
Assignments Module
Attendance Module
Result Card Module
Time Table Module
When the plugin is installed and activated, there will be a new menu item (UniLMS Pro) in the left sidebar of the WordPress dashboard. From there the admin can access all modules of the plugin.
Before diving into the demo of the plugin, let’s discuss the main features of each module of the UniLMS plugin.
Dashboard Module – UniLMS
The dashboard page shows statistics of each module e.g. total number of approved faculty members, total courses, total classes, etc.
The dashboard page briefly explains the features of all available modules of the UniLMS plugin
The dashboard page also provides a quick guide to setup and configure different modules of the plugin
Teachers Module – UniLMS
Teachers can register themselves using the teacher registration page (added automatically when the plugin is activated) or admin can add teachers using UniLMS Pro -> Teachers -> Add New
When a teacher registers to the website, then he/she cannot log in to the website until an admin approves it
A teacher can create/edit new courses, lectures, activities(quizzes, assignments, midterm exams, final term exam, projects and add marks for these activities), questions, attendances, course files, and students
Any content created by teachers is not published until an admin review it
A faculty page is also created automatically (when the plugin is activated), listing all faculty members linking to their profile pages
Any teacher can view his/her profile by visiting the teacher profile page (added automatically when the plugin is activated). The profile page shows personal details, assigned courses and time table of the teacher.
Students Module – UniLMS
Students can register to the website as a standard user
Admin can approve student profile by reviewing it and assigning him ‘UniLMS Student’ role by editing his/her profile
Once a student is assigned UniLMS Student role, then he/she can log in to the website and add/edit details like department, class, registration number, etc. by visiting profile page in the backend of the website
After adding details in the profile, user can visit the Student Dashboard page which is automatically created when UniLMS plugin is activated
At the Student Dashboard page, the student can see his/her information and also he/she can view results of all activities (quizzes, assignments, midterm, final term, final result, etc.)
Classes Module – UniLMS
Admin can add new classes or update/delete existing ones
Admin can assign courses to each class
Admin can also generate a class-specific time table from the complete time table
Any student can view each class details from the front end of the website
Courses Module – UniLMS
Admin, as well as teachers, can create new courses
Courses created by teachers are not published until reviewed by admin
Admin can edit/delete all courses while teachers can only edit their own courses
Teachers cannot even delete their own courses
When UniLMS plugin is activated, then a new page titled UNILMS Courses is automatically created which lists all courses in a tabular format
Course contents, of the course created by the teacher, are generated using the lectures and activities created by the teacher
Course author can define sessional marks %, midterm exam %, final term exam %, and grad policy, etc.
Course author can generate course specific time table from the complete time table
Lectures Module – UniLMS
Admin, as well as teachers, can create new lectures while teachers can only edit their own lectures
These lectures can be added to the course contents of the course
Each lecture is assigned to a particular course
A teacher can share all necessary details or resource materials with each lecture
Activities Module – UniLMS
Activities include quizzes, assignments, midterm exams, final term exams, projects, class participation, etc.
A teacher can assign questions to activities like quizzes, midterm exam or final term exam
A teacher can select whether this activity will count in sessionals marks or not
Each activity’s marks can be added for each student
These activities can be viewed publically except the fact that questions will not be visible publically. On public pages of these activities, details like activity max marks, submission date, or activity result are shown
Questions Module – UniLMS
Both admin and teachers can create new questions while teachers can only edit/use their own questions while preparing quizzes
Mcqs, true/false, short questions, and long questions are the options available as question type
Max marks and correct option can also be defined for questions of type MCQs or true/false
Attendance Module – UniLMS
Both admin and teachers can create new attendance while teachers can only edit/use their own attendances while preparing course files
Attendance date, class, course, activity and students list to mark attendance are some of the options available
Attendances are used while preparing course files or to give attendance marks to the students
Course File Module – UniLMS
A Course file includes grading policy, course contents, course plan, instructor log, student log, quizzes, assignments, sessionals, midterm exam, final term exam, attendance sheet and the final result of that course
Each course file part is automatically generated by specifying class and course
Each course file can also be seen publically on the front side of the website
Archive page and single page of each course file are publically visible to anyone
A teacher can printout each part of the course file from admin or front end side of the website
Time Table Module – UniLMS
Admin can generate random time table automatically
Time table can be generated from courses, classes and faculty members added inside UniLMS plugin
Admin can also generate a custom time table for custom courses, classes, and faculty members
Time slots, day slots, and room slots are defined for each time table
Time table also shows empty slots which can be used to arrange supplementary classes
Time tables can also be shown publically so that students can see their time table by visiting the website
Settings Module – UniLMS
Admin can define institute logo which can be used while printing course files or any other documents
Video Demo – UniLMS
Video Demo – UniLMS – Learning Management System – WordPress Plugin
In this blog post, we have discussed what is React server-side rendering, what’s the difference between client-side rendering and server-side rendering and shared some code snippets for the server-side rendered React applications.
Client-Side Rendering (CSR)
The client sends a request to the server (API)
The server receives the request, query the requested data and sends the data back to the client
The client receives the data, renders the HTML and display it to the user
Server-Side Rendering (SSR)
The client sends a request to the server
The server receives the request, query the required data, renders the HTML and sends back the rendered HTML page
The client receives the rendered HTML page from the server and displays it to the user
Benefits of Server-Side Rendering
Improves the performance of the application
Improves search engine optimization (SEO) of the application
Using Next.js Library
Next.js is a JavaScript library that allows us to quickly set-up server-side rendered React applications. It provides some greater features like page-based routing, server-side page rendering, automatic code-splitting, client-side routing, API routes and many more…
Steps to Create Server-Side Rendered React Application using Next.js
CD into the folder, where you want to create the application by using Command Prompt
Run the command: npm init
Answer the asked questions and hit Enter
Install the required dependencies by running the command: npm install –save next react react-dom
Open the application folder in your favorite code editor like VSCode
Open package.json file and edit the scripts object with following code (see Code Snippet 1)
Create a new folder inside the application folder and name it ‘pages’
Inside pages folder, create a new file and name it as index.js and following code (see Code Snippet 2)
For static files like images, create a new folder called static
This is the second part of the series “Learn Angular 9 From Scratch”. In this post, we will learn how to create a new Angular application using Angular Command Line Interface i.e. Angular CLI. We will also learn about two new Angular commands i.e. ng new and ng serve. We will also test our new Angular application on localhost.
Create a New Application
Open command prompt as an administrator
When you open the command prompt, you will be inside the directory C:\WINDOWS\System 32>
Change directory / CD into the folder where you want to create a new Angular application (see screenshot 1) e.g. to change the current directory to D drive, type D: and hit Enter.
Run the command: ng new myapp // change ‘myapp’ to whatever name you want for your application
Now Angular CLI will ask two questions i.e. would you like to add Angular routing? (I have selected Yes, because we will implement routing in our application) and which stylesheet format would you like to use? (I have selected CSS but you can select other format as well) [see screenshot 1]
After the confirmations, Angular CLI will install all necessary packages and their dependencies and will create a new Angular application inside the folder ‘myapp’
Screenshot 1: Create a new application using the command: ng new myapp
Test the Application
Change directory / CD into folder ‘myapp’ e.g. cd myapp
Run the command: ng serve
Angular CLI will compile the application code and will serve the application on http://localhost:4200 (see screenshot 2)
Now you can test the application on http://localhost:4200 (see screenshot 3)
Screenshot 2: Serve the Angular application using the command: ng serveScreenshot 3: Demo of the newly created Angular application
In the next post, we will learn what are the components and how to create components in an Angular application using Angular CLI. Stay tuned!
What are the prerequisites to create an angular application?
What is NodeJS and Node Package Manager (npm)?
What is Angular CLI?
What is Angular?
Angular is a framework developed by Google to design frontend applications. The Angular converts the complete application into a single-page application (SPA). The main advantage of single-page applications (SPA’s) is that the user can access different components and pages without reloading the website. Moreover, Angular application is bundled into a single HTML, CSS and JavaScript file, which greatly improves the overall performance of the application.
Prerequisites
We need NodeJS and Angular CLI to create an angular application.
NodeJS
Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser
Node.js provides a package manager (npm) to install libraries and packages
We will use Node Package Manager (npm) to install Angular CLI on our computer
To download and install the latest stable version of node.js, visit the official website https://nodejs.org/
Angular CLI
Angular CLI or Command Line Interface is a command-line tool for creating angular applications
To install Angular CLI:
Click ‘Start Menu’
Type ‘cmd’ and open ‘Command Prompt’ as an administrator
Type the command: npm install -g @angular/cli. This command will install Angular CLI globally on your computer which means that we can run Angular commands from any directory on our computer.
Verification
To verify that node.js and Angular CLI are installed correctly:
Click ‘Start Menu’
Type ‘cmd’ and open ‘Command Prompt’ as an administrator
To check if NodeJS is installed, run the command node –version in the command prompt
To check if Angular CLI is installed, run the command: ng –version in the command prompt
If node.js and Angular CLI are installed correctly, then we are all set to create our very first Angular project. In the next tutorial, we will learn how to create an Angular application using Angular CLI.
Video Tutorial
#01 – Introduction – Learn Angular From Scratch with Junaid Hassan
Git/Github is a very powerful version control management tool used by the developers to manage the source code of the projects. In this blog post, we have listed all of the basic Git commands along with the short description of their usage.
git init (used initiate a git repository)
git add file-name (used to add the file to a staging environment)
git add . (used to add all files to a staging environment)
git commit -m “first version release” (used to push the changes from a staging environment to the tracked list)
git checkout file-name (used to get the previous version of the file back from the staging environment)
git reset HEAD file-name (used to un-stage the file changes)
git status (used to check the status of the files to be staged or the files to be committed)
git log (used to check the history of the commits)
git rm filename (used to remove the file and push the changes to a staging environment as well)
git checkout hash (used to get back to the previous commit by using aunique hash number)
git branch (used to see all branches)
git checkout branch-name (used to switch to the specified branch i.e. branch-name)
git branch branch-name (used to create a new branch named branch-name from current branch)
git merge branch-name (used to merge changes from branch-name into the current branch)
git branch -m branch-name new-name (used to rename the branch from branch-name to new-name)
git branch -D branch-name (used to delete the branch i.e. branch-name)
git clone github-url (used to clone an existing github repository from the specified URL i.e. github-url)
git branch -a (used to see all branches of the cloned github project)
git checkout -b branch-nameorigin/branch-name (used to switch to another branch i.e. branch-name of the cloned github project)
git clone –mirror github-url .git (used to clone .git folder of the github repository from the specified URL i.e. github-url)
git config –bool core.bare false and git reset –hard (grab all branches and copy in the current folder from the above-cloned repository)
git clone -b branch-name github-url (used to clone specific branch from the specified github project i.e. github-url)
