Advanced Client-Side Dev: API Setup, Data Fetching (Axios), and CRUD, Lecture notes of Web Design and Development

Download Advanced Client-Side Dev: API Setup, Data Fetching (Axios), and CRUD and more Lecture notes Web Design and Development in PDF only on Docsity!

Advanced Client-

Side Development

Setting up an API, Fetching Data with Axios,

Display API data, CRUD operations

Prerequisites

• Visual Studio 2017 (Version 15.7 or later)
• .NET Core SDK 2.
• MS SQL Server Management Studio
• SQL Server
• Workloads
  • ASP.NET and web development (under Web & Cloud)
  • .NET Core cross-platform development (under Other Toolsets)

Creating Database Tables (Student Only)

• Student
  • ID
  • FirstName
  • LastName
  • EnrollmentDate
    • Course
      • CourseID
      • Title
      • Credits

Breaking the many to many relationship

• Enrollment
  • EnrollmentID
  • CourseID
  • StudentID
  • Grade

Check connection with Server and Database

• Tools –> Add SQL Server
  • Data Source
    • Microsoft SQL Server (SqlClient)
  • Server Name
    • DELL-INSPIRON (Whatever your server name is)
  • Database Name
    • School (In which our three tables are present)

Adding the Database connection string

• In appsettings.json project file we add connection string to our Database Server (Please note that you would write your own credentials): "ConnectionStrings": { "Connection": "Server=DELL- INSPIRON;Database=School;Trusted_Connection=True;" } //DELL-INSPIRON is my server name could be different depending on what your //server name is + Database will be created for you with this name

Registering the context with Dependency Injection

• In startup.cs project file we add this code in ConfigureServices method - services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("Conne ction")));

Adding the Controllers

• Right click on the Controller folder in your project and add Controller: - Select API Controller, using Entity Framework

Configure CORS in your Startup.cs file:

• In the Configure method, make sure to use UseCors before UseEndpoints:
• app.UseCors("AllowReactApp");

Create react app

• Create-react-app interface
• (^) Npm install axios
• Get the components, apiConfig and app from blackboard
  • Understanding the react code