DEV Community: Eldrige

Installing MongoDB On Windows 10

Eldrige — Wed, 16 Dec 2020 23:27:22 +0000

Installing and Setting Up MongoDB on Windows 10

MongoDB is a general-purpose, document-based, distributed database built for modern applications.
It is very popular since many developers think in terms of objects, and databases in MongoDB are just regular objects.
In this tutorial, we will discover how to install and setup the MongoDB shell, on a windows 10 computer.

Let’s Start

Step One

👉Head over to mongodb.com
👉 Head to software, then community server. A small dropdown will appear, in the dropdown, select download community version. This will then direct you to the download page.

You can interact with MongoDB in multiple ways, The shell implicates manipulation of your database through the terminal.
Other options involve using the cloud ( MongoDB Atlas) and also using a graphic user interface ( MongoDB Compass).

Step Two

👉 Once the download completes. Head over to your download folder and double click it on the downloaded file, to kickstart your installation process.
The installation is classic. The option we will select is the complete setup. So as to ship all basic features, Then, we can simply leave out the defaults.

👉As soon as the installation is complete. Head over to your applications in the settings of your windows computer. You will see Mongo shell now listed as one of your applications.

🎉 Great!!! You now have the Mongo shell on your pc.

Step 3

In order to make MongoDB accessible everywhere, we need to add it to our environment variables.
👉 On the start menu, type env. You will see a popup, containing edit system environment variables. Click on edit environment variables.

Now click on it. You will see another menu, now click on environment variables. You will now click on the path system variable and add the entry to your mongo bin directory.
The directory looks like this C:\program files\mongo\server\4.2\bin

👉 Now head to your terminal and type mongo. You will be presented with the following screen.

🎉🍾🎊Congratulations!!!! You have successfully installed MongoDB shell on your computer.

Deploying your Angular App to Firebase

Eldrige — Thu, 10 Dec 2020 19:20:02 +0000

So, you have finished building your awesome project, and you want to showcase it to the world. How do you that? There are many options, but using firebase-hosting is one of the easiest and best options.
In this post, we will learn how to deploy our application to firebase.

Let's go
👉 Head over to your firebase console console.firebase.
Create a new project. If you do not have a firebase account, create one first, by using this link firebase .

Once you have created your project, select the empty tag icon, to embed it into a web application.

Click the settings icon, then look for the SDK snippets of your project

Upon clicking it, you will be able to find the configuration files, you need to import to your angular project. Copy all the details found in the firebaseConfig object.

👉 Head to your angular application, open the environment.prod.ts and the environment.ts files. Inside of them, you will add the configs you just obtained from your Firebase project, as a key called firebase, and the value being the firebase SDK snippet of your project

Bravo. 👌
👉 Now we need to install some packages to interact with firebase.
So navigate to your project directory using the command-line and type the following;

npm install firebase @angular/firebase

Tip: If you are using vs-code, you can hit ctrl + ` to toggle up your integrated terminal.

👉 Head over to your app.module.ts, and bring in AngularFirebase module from @angular/firebase, equally import your environment.ts file.
Now add the following to your imports array

AngularFireModule.initializeApp(environment.firebase)

👉 Open your terminal and install firebase-tools, globally

npm install firebase-tools

👉 Once it's done installing, type firebase login. This will display a pop-up on your browser, where you would have to input your firebase credentials.

👉 Once done, you can navigate back to your project folder, and enter

firebase init hosting

in your terminal.
This will initialize your app to use firebase hosting and you will have to select the last project you created in firebase.

👉 After this, you will be asked the following question “What do you want to use as your public directory?”. You must include your application’s name in this field: “dist/YourProjectName.” Which is going to be produced by using ng build --prod.
👉 Next, specify “yes” to configuring as a single-page application and “no” to overwriting your existing index.html (if applicable).

👉 Now, we can build our application for production. Just type the following to your terminal

ng build --prod

. It is going to create our static files needed for deployment.

👉 Finally, enter firebase deploy. The command will deploy your static files to firebase.Once it has finished uploading your content to the internet, it will show you your app's Url.

👉 Now open your browser, and navigate to that link.

🎊🍾🎉Congrats, you just deployed your application to your firebase🔥🔥.

Angular Directives in 5 minutes

Eldrige — Tue, 24 Nov 2020 10:33:39 +0000

So what are directives?

These are attributes added to our DOM elements, that make them dynamic. They supercharge ⚡ our DOM by adding extra functionality.

In angular there are two types of directives. Structural and Attribute directives.

Structural directives, change the DOM layout, by adding or removing content. Some examples include *ngIf and *ngFor.
On the other hand attribute directives, change the behavior of an element. Some examples include *ngClass and *ngStyle.

In this post, we will be looking at the most commonly used directives.

*ngIf

This directive conditionally shows content based on an expression's value.

Syntax:
*ngIf="expression"

Example:

If our expression results in a truthy value, our HTML tag will be rendered. In this case our expression is false, so the p tag will not be rendered

*ngFor

This directive repeats a given DOM element for each element found in an array.

Syntax:
*ngFor="let item of items"

Example:

Here our array is the fruits array, and we reference each item in the array as fruit. Then we display it in our component using interpolation.

*ngStyle

This directive allows us to add styles dynamically to our tags.
Syntax:
In its simplest form, it is just property binding
We bind the background color of this div to be red

Plain syntax:
[ngStyle]="{style: expression}"

In this case, we bind it directly to a property in our logic. So our div will be red.

*ngClass

This directive allows us to set classes dynamically to our elements.
Syntax:
[ngClass]="{cssClass: expression}"

Result:

Directives are powerful, when it comes to handling logic, there is a lot more to directives. We can even create our own custom directives.

Building Forms The Angular Way ( Part 2 )

Eldrige — Sat, 14 Nov 2020 10:58:48 +0000

In the previous post, we discovered the template-driven approach for building forms. Here is a link to the post: Building Forms The Angular Way.

In this tutorial, we will discover how to build forms using the reactive approach.
In contrast to template-driven forms, reactive forms are entirely controlled through the logic (ts component). Also, they are more robust and testable.

👩👨‍🍳Recipe

👉 Head to app.module, and import the ReactiveForms module from angular/forms, and equally add it to the imports array.

Doing this gives us access to the following directives, formGroup,
formControlName, formControl, formBuilder and formArray.

Quick recap: form-controls represent a single input, and a formGroup is a collection of formControls.

The FormGroup object has the following properties errors, dirty, valid, value. The errors hold the validation errors, the touch value is boolean indicating if an input has received focused, the dirty property is equally boolean, it indicates if an input has been filled.

👉 Head to your logic and import formGroup, formControl from angular/forms

In our logic, we will create a studentForm property to keep track of students. Create it, then define its type to be of type formGroup.

Then in the ngOnInit method, we will initialize it to a new FormGroup instance, and define its form controls. That is the email and name.

👉 Head to your view, and add the following code.

In the template, we use property binding to bind the form, to our studentForm property.

For each input, we attribute the formControlName directive, which we assign to the form control defined in our logic.

👉 Head to your browser. Initially, you should see something like this

Now, when we modify our form, we realize the formGroup properties change.

🎊🎉🍾Congratulations. You have just built a form using the reactive approach.

Angular Routing Crash Course

Eldrige — Thu, 05 Nov 2020 13:23:24 +0000

So what is routing?

In web development routing, refers to splitting the application into different areas based on the URL, that is derived from the current browser.

Why do you need routing?

To separate the app into different areas
To keep our app in a clean state
Protect areas of our app, based on certain rules

👩🍳 Recipe
1) Generate a new angular application using the CLI, passing the --routing flag.

The --routing flag sets up our routing module, and equally imports it to the app.module.
2) Open your newly created app, and navigate to app.component.html. Add the bottom of the file, you should see the router-outlet directive.

The router-outled directive displays our routed components
On top of the router-outlet directive, we will add a bootstrap navbar, to ease navigation. You can get it here
https://getbootstrap.com/docs/4.5/components/navbar/
3) Now go ahead and generate the following components using the CLI, home, about us, contact, not-found

4) Go to the app-routing.module file, inside it, you will find a routes array. This array will contain our route definitions

5) Insert the following code into the routes array, and also import each respective component.

The route array basically contains objects.

The path defines what text should be added to the URL.
The component defines which component should be displayed for that particular route.
The path containing the empty string,'' defines the route, as the default route.
The path containing '**', serves as a wildcard route, which is used to redirect the user to a defined component if the current URL is invalid.

6) Now, in the app.component.html we will remove the href attribute and replace it with the routerLink directive. We now map the routerLink directive to our defined paths.

Now, we can serve our application and test our various links.
Initially, we get routed to the HomeComponent, because we defined it, as the default path.

🎊🎉🍾Congratulations !!! You just learned the basics of routing in Angular. There is much more to routing in angular.

Building Forms The Angular Way

Eldrige — Wed, 28 Oct 2020 00:16:09 +0000

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

Angular has two-main approaches to building forms. The Template Driven approach and the Reactive Form approach.

In this tutorial, we will be learning the template driven approach.

Recipe👨🍳

👉Import FormsModule into your main app.module component, and add it to the imports array.

This will give us access to the following directives ngForm,ngModel and ngSubmit.

👉 Head over to your view

We will bind the ngSubmit event to a method in our logic.
Equally, we will create a template variable (#loginForm) and bind it to the ngForm directive, so as to hold a reference our form

-Behind the scenes, whenever a form element is created angular attributes the ngGroup directive to it automatically
-ngGroup is just an object that represents a collection of form-controls.
-Form controls are the smallest unit of a form, they hold the form values and the validation information.

-In your input make sure you gave a name property, and attach the ngModel directive to it
Attaching the ngModel directive gives us one-way binding, and attributes a form-control to our input

-Finally, add a button with the type submit

👉 Head over to your logic and add the method, that will log the values entered into the form

Now, Open your form in the browser, and fill in the form.

After submitting the form, check your console. You will see the values you just submitted

Congratulations!!!🎉🍾㊗🎊 You just created your first angular form. In the upcoming tutorials, we will discover how to create forms, using the reactive approach.

Downloading and Installing MySQL workbench (Community Version) on Windows 10

Eldrige — Tue, 27 Oct 2020 08:14:35 +0000

✔MySQL is an open-source relational database management system. SQL simply means structured query language.

✔MySQL Workbench is a visual database design tool that integrates SQL development, administration, database design, creation and maintenance into a single integrated development environment for the MYSQL database system.
-Head over to https://dev.mysql.com/downloads/workbench/, to download MySQL workbench.

msql

✔Click on the Go to Download Page button. This will redirect you to the signup/ login page!

✔You can now choose to sign up or login if you already have a MySQL account. For this tutorial, we will skip authentication and click on No thanks, just start my download. This will get our download started

✔As soon as the download completes, navigate to your download folder and double-click to begin the installation process.

✔Upon clicking on the download, you will be presented with the MySQL setup screen

✔Click the next button: You can change your installation path, but it is recommended you leave the default directory, to your program files directory.

✔Next: Choose the setup type. The type we will choose is the complete setup version.

✔Next: Now click on the install button. It will take some time to install.
As soon as it completes, click the Finish button and MySQL workbench will launch

Congratulations!!! 🎉🎊 You have successfully downloaded and installed MySQL workbench.

Downloading and Installing XAMPP on Windows 10

Eldrige — Sat, 24 Oct 2020 14:06:19 +0000

XAMPP is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, Maria DB database, and interprets scripts written in the PHP and PERL programming language.

Head over to https://www.apachefriends.org/download.html

👉Download the latest version (the one found at the bottom). At the time of this writing, the latest version is 7.4.11 by clicking on the Download (64 bit) button.

👉There you go, now wait for the download to complete. As soon as it completes, navigate to your download folder, then double click on the XAMPP download to start the installation.

👉Click on the Next button

👉You can select the components you wish to install and clear the components you do not want to install. It is recommended to leave the defaults and proceed to the next button.

👉Choose an installation path, avoid choosing c:/program-files, because it requires User Access Control will restrict some features of XAMPP.

👉On the next screen, you should see Bitnami. Bitnami is open-source software that enables you to add plugins to your existing XAMPP application.
👉Click on the Next button: The installation proper should start

👉This may take some time to complete, you may also see a popup from Windows firewall, asking you for permission to allow it to communicate on private networks. Just click to allow access.

👉Click on finish to exit the setup and launch the XAMPP control panel.

Congratulations!!! 🎉🎊You have successfully downloaded and installed XAMPP.