Foundations of Cloud Computing with Azure: Build Your Expertise

 Foundations of Cloud Computing with Azure: Build Your Expertise

The rise of cloud computing has changed the IT industry, & dominating platforms like Microsoft Azure has become important for authorities & companies. Soft Approach IT brings you an exclusive 4 week course, Foundations of Cloud Computing with Azure, planned to empower learners with significant cloud skills. This English language course provides a certificate of completion & is priced at ₹10,999. With four extensive lessons, participants will achieve practical knowledge & insights into deploying, handling, & scaling applications using Azure cloud services.

Week 1: Introduction to Azure Cloud Computing

The course starts by introducing the basics of cloud computing, focusing on its advantages & the several cloud models. Participants will learn to make an Azure account & navigate the intuitive Azure Portal, which serves as the gateway to handling cloud resources. This week lays the groundwork for understanding Azure services, giving students a clear overview of how cloud technology changes business operations. With a practical approach, this module guarantees that even beginners feel confident in leveraging Azure for various applications.

Week 2: Mastering Virtual Machines and Networking

Virtual machines (VMs) are central to cloud operations, & this module guides students in creating, configuring, & handling Virtual machines on Azure. Networking concepts like virtual networks, subnets, & network security are also covered, guaranteeing that participants can build secure & scalable cloud atmospheres. This week emphasizes practical execution, assisting learners understand how to optimize their Azure infrastructure for seamless connectivity & strong performance. By mastering these methods, participants are equipped to manage vigorous workloads with ease.

Week 3: Exploring Azure Storage Solutions

Efficient data management is important in cloud computing, & this module concentrates on Azure’s flexible storage solutions. Participants will dig into Blob & Table storage, relational databases such as SQL, & NoSQL choices like Cosmos DB. The emphasis is on understanding the exclusive features & benefits of each storage type. Learners will also discover data encryption & security practices, guaranteeing the integrity & confidentiality of stored details. This week prepares participants to manage real-world data challenges effectively & securely.

Week 4: Enhancing Security and Optimizing Costs

Security and cost-efficiency are important in handling cloud resources, & this module equips learners with modern strategies. Best practices for protecting Azure environments are discussed, including role-based access control (RBAC) for streamlined resource management. Students will also learn to plan cloud architectures that increase performance while less expenses. The course concludes with a final project, enabling students to execute their learnings in a real world scenario. This practical experience strengthens their skills and confirms that they are ready for practical applications.

Why Enroll in This Course?

The Foundations of Cloud Computing with Azure course by Soft Approach IT combines extensive content with hands-on applications to provide an unparalleled learning experience. Designed for IT experts, developers, & technology enthusiasts, this program offers the tools & knowledge required to thrive in the ever-evolving cloud landscape. With professional support, practical projects, & a worldwide recognized certification, this course guarantees learners are ready to excel in their careers. Invest in your future today & unlock the highest potential of Azure!

How To Add DateRange Picker In Angular Application

 

Introduction

 

In this article, we will learn how to add date range picker In Angular application.

 

Prerequisites

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Node and NPM installed

Let's create an Angular project by using the following command.

1. ng new rangesliderdemo  

Open this project in Visual Studio Code and install bootstrap by using following command.

1. npm install bootstrap --save     

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line. 

1. @import '~bootstrap/dist/css/bootstrap.min.css';   

Now install ngx-daterange library using the following command. 

1. npm install ngx-daterange --save  

Now create a new component using the following command,

1. ng g c sliderdemo  

Now open sliderdemo.component.ts file and add the following code,

1. import { Component, OnInit, ViewChild } from '@angular/core';  
2. import { DateRangePickerComponent, IDateRange, IDateRangePickerOptions } from 'ngx-daterange';  
3. import * as moment from 'moment';  
4. @Component({  
5.   selector: 'app-sliderdemo',  
6.   templateUrl: './sliderdemo.component.html',  
7.   styleUrls: ['./sliderdemo.component.css']  
8. })  
9. export class SliderdemoComponent implements OnInit {  
10.   constructor() { }  
11.   
12.   @ViewChild('dateRangePicker', { static: true })  
13.   dateRangePicker: DateRangePickerComponent;  
14.   firstFieldEmittedValue: IDateRange;  
15.   firstFieldOptions: IDateRangePickerOptions = {  
16.     format: 'MM/DD/YYYY',  
17.     minDate: moment().subtract(10, 'years'),  
18.     maxDate: moment().add(3, 'years'),  
19.     preDefinedRanges: [  
20.       {  
21.         name: 'Last Week',  
22.         value: {  
23.           start: moment().subtract(1, 'week').startOf('week'),  
24.           end: moment().subtract(1, 'week').endOf('week')  
25.         }  
26.       },  
27.       {  
28.         name: 'Two Weeks Ago',  
29.         value: {  
30.           start: moment().subtract(2, 'week').startOf('week'),  
31.           end: moment().subtract(2, 'week').endOf('week')  
32.         }  
33.       },  
34.       {  
35.         name: 'Three Weeks Ago',  
36.         value: {  
37.           start: moment().subtract(3, 'week').startOf('week'),  
38.           end: moment().subtract(3, 'week').endOf('week')  
39.         }  
40.       },  
41.       {  
42.         name: 'Last Month',  
43.         value: {  
44.           start: moment().subtract(1, 'month').startOf('month'),  
45.           end: moment().subtract(1, 'month').endOf('month')  
46.         }  
47.       },  
48.         
49.       
50.     ]  
51.   }  
52.   secondFieldOptions: IDateRangePickerOptions = {  
53.     autoApply: false,  
54.     clickOutsideAllowed: false,  
55.     format: 'MM/DD/YYYY',  
56.     icons: 'font-awesome',  
57.     minDate: moment().subtract(10, 'years'),  
58.     maxDate: moment().add(1, 'year'),  
59.   }  
60.   ngOnInit(): void {  
61.      
62.   }  
63. }  

Now open sliderdemo.component.html file and add the following code,

1. <div class="row" style="margin-top:10px;margin-bottom: 10px;">          
2.     <div class="col-sm-12 btn btn-success">          
3.       How to Create Date Range Picker in Angular application    
4.     </div>          
5.   </div>      
6. <div class="col-sm-6 form-group">      
7.   <date-range-picker [options]="firstFieldOptions"  [ngModel]="'myDateRange'">  
8.   </date-range-picker>   
9. </div>    

Now open sliderdemo.component.css file and add the following css classes.

1.  .dateRangePicker-wrapper .dateRangePicker .form-inputs>.col {  
2.     min-width: 270px;  
3.     padding: .5rem 15px;  
4.     background-color: #28a745;  
5. }  
6.  .dateRangePicker-wrapper .dateRangePicker:before {  
7.  border-bottom: 0px solid #6e777c !important;  
8.    
9. }  

Now open app.module.ts file and add the following code,

1. import { NgModule } from '@angular/core';  
2. import { BrowserModule } from '@angular/platform-browser';  
3. import { HttpClientModule } from '@angular/common/http'  
4. import { AppComponent } from './app.component';  
5. import { SliderdemoComponent } from './sliderdemo/sliderdemo.component';  
6. import { FormsModule } from '@angular/forms';  
7. import { NgxDateRangeModule } from 'ngx-daterange';  
8. @NgModule({  
9.   declarations: [  
10.     AppComponent,  
11.     SliderdemoComponent  
12.       
13.   ],  
14.   imports: [  
15.     BrowserModule,,HttpClientModule,NgxDateRangeModule,FormsModule  
16.   ],  
17.   providers: [],  
18.   bootstrap: [AppComponent]  
19. })  
20. export class AppModule { }  

Now open app.component.html file and add the following code,

1. <app-sliderdemo></app-sliderdemo>  

Now, run the application using the 'npm start' command and check the result.

 

 

Select start date and end date

 

Summary

 

In this article, we learned how to add date range picker In Angular application.

How To Fetch Data From WEB API In Vue.js Application

 In this article, we will learn about basic concepts of Vue.js and how to install Vue.js and create a new project We will also learn how to perform HTTP Get operation to fetch data in a Vue.js application.

 

What is Vue.js

 

Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue. and pronounced as View.

 

As per official Vue.js documentation,

 

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

 

Vue was created by Evan You, who was then working for Google using AngularJs in their projects

 

Prerequisites

• Basic knowledge of HTML and JavaScript.
• Text editor (We use Visual studio code)

Vue.js Installation

 

In this article, we will use Vue CLI to install and create vue project.

 

We use the following command to install Vue.js using CLI.

1. npm install -g @vue/cli  

Create Vue.js Project

 

Create a Vue.js project by using the following command.

1. vue create demo1

Now Install the Axios library using the following command. Learn more about Axios. 

1. npm install --save axios     

Install bootstrap using the following command.

1. npm install bootstrap-vue bootstrap --save  

Open main.js file and import bootstrap reference.

1. import 'bootstrap/dist/css/bootstrap.css'  
2. import 'bootstrap-vue/dist/bootstrap-vue.css'  

Now right click on the Src folder and add a new file named 'Http-comman.js'.and add following code in this file.

1. import axios from "axios";  
2.   
3. export default axios.create({  
4.   baseURL: "https://localhost:44314/",  
5.   headers: {  
6.     "Content-type": "application/json"  
7.   }  
8. });  

 Now right click on the Src folder and add a new file named 'Employeeservice.js'.and add following code in this file.

1. import http from "./Http-comman";  
2. class EemployeeService {  
3.      
4.     getAll() {  
5.         return http.get("/api/EmployeeInfo/Getemployeeinfo");  
6.       }  
7.         
8. }  
9. export default new EemployeeService();  

Now right click on the Src folder > components folder and create a new componnet named 'Employeedata.vue'.and add following code in this file.

1. <template>  
2. <div class="row" style="margin-bottom: 10px;">    
3.   <div class="col-sm-12 btn btn-success">    
4.    How to fetch data from WEB API in Vue.js Application  
5.   </div>    
6. </div>   
7.     <div>  
8. <table class="table">  
9.         <thead>  
10.         <th>Id</th>  
11.         <th>Name</th>  
12.         <th>City</th>  
13.         <th>Age</th>  
14.         <th>Technology</th>  
15.         <th></th>  
16.         </thead>  
17.         <tbody>  
18.             <tr v-for="item in employees" :key="item.Id">  
19.                <td>{{item.Id}}</td>  
20.                 <td>{{item.Name }}</td>  
21.                  <td>{{item.City }}</td>  
22.                  <td>{{item.Age}}</td>  
23.                  <td>{{item.Tech}}</td>   
24.             </tr>  
25.         </tbody>  
26.     </table>  
27.     </div>  
28. </template>  
29.   
30. <script>  
31. import EemployeeService from "../Employeeservice";  
32.     export default {  
33.          name: 'Employeelist',  
34.              data() {  
35.        return {  
36.       employees: [],  
37.     };  
38.   },  
39.           created()  
40.         {  
41.              this.retrieveemployees();  
42.         },  
43.       
44.     methods: {  
45.         retrieveemployees() {  
46.       EemployeeService.getAll().then(response => {  
47.       this.employees = response.data;  
48.           console.log(response.data);  
49.         })  
50.         .catch(e => {  
51.           console.log(e);  
52.         });  
53.     },  
54.   
55. }  
56. }  
57. </script>  
58.   
59. <style lang="scss" scoped>  
60.   
61. </style>  

Now open App.vue file and add the following code.

1. <template>    
2.   <Employeelist/>    
3. </template>    
4. <script>    
5. import Employeelist from './components/Employeedata.vue';    
6. export default {    
7.   name: 'App',    
8.   components: {    
9.     Employeelist    
10.   }    
11. }    
12. </script>    
13.     
14. <style>    
15. #app {    
16.   font-family: Avenir, Helvetica, Arial, sans-serif;    
17.   -webkit-font-smoothing: antialiased;    
18.   -moz-osx-font-smoothing: grayscale;    
19.   text-align: center;    
20.   color: #2c3e50;    
21.   margin-top: 10px;    
22. }    
23. </style>     

Create a Web API Project

 

Open Visual Studio and click on create a new project,

 

 

Now select the project and click on the Next button.

 

 

Now select the project name and project location and click on the Create button.

 

 

Choose the template as Web API.

 

 

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

 

 

Click on the "ADO.NET Entity Data Model" option and click "Add". 

 

 

Select EF Designer from the database and click the "Next" button.

 

 

Add the connection properties, select the database name on the next page, and click OK.

 

 

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

 

 

Right-click on the Controllers folder and add a new controller. Name it "Employee Info controller" and add the following namespace in the Employee Info controller.

1. using EmployeeInfo.Models;  

Now, add a method to fetch data from the database.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Net.Http;  
6. using System.Web.Http;  
7. using EmployeeInfo.Models;  
8.   
9. namespace EmployeeInfo.Controllers  
10. {  
11.     public class EmployeeInfoController : ApiController  
12.     {  
13.         EmployeeEntities DB = new EmployeeEntities();  
14.         [HttpGet]  
15.         public object Getemployeeinfo()  
16.         {  
17.             return DB.EmployeeInfoes.ToList();  
18.         }  
19.     }  
20. }  

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines:

1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");          
2. config.EnableCors(cors);  

 Now, go to Visual Studio code and run the project by using the following command: 'npm run serve'

 

 

 

Summary

 

In this article, we learned how to fetch data using web API and Vue.js. You can download the code from Github.

• Download the code from here.