Create a Login App with ASP.NET on Ubuntu 22.04

Here’s a step-by-step guide to create a simple login form using ASP.NET Core (C#) and MS SQL Server with VS Code and Linux:

  1. Install .NET SDK If you haven’t already, install the .NET SDK for your Linux distribution. You can find instructions on the official Microsoft website.check your dotnet version
    [codesyntax lang=”bash”]

    [/codesyntax]
  2. Create a new ASP.NET Core project Open a terminal and run:

    [codesyntax lang=”bash”]

    [/codesyntax]

    Go to the project directory ‘LoginApp’ with ‘cd LoginApp’

  3. Install required NuGet packages Run the following commands:
    [codesyntax lang=”bash”]

    [/codesyntax]

    Make sure the version is match in LoginApp.csproj
    [codesyntax lang=”csharp”]

    [/codesyntax]

  4. Set up the database connection Open appsettings.json and add the connection string:
    [codesyntax lang=”text”]

    [/codesyntax]
    Note: I need to add ‘TrustServerCertificate=True;’

  5. Create ApplicationDbContext Create a new file ApplicationDbContext.cs
    [codesyntax lang=”csharp”]

    [/codesyntax]

  6. Update Program.cs Replace the content of Program.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  7. Create Login Model Create Models/LoginModel.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  8. Create Account Controller Create Controllers/AccountController.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]

  9. Create Login View Create Views/Account/Login.cshtml:
    [codesyntax lang=”html4strict”]

    [/codesyntax]

  10. Set up the database. Create a new database ‘LoginApp’
  11. Add a test user Create DbInitializer.cs:
    [codesyntax lang=”csharp”]

    [/codesyntax]
    Note: it’ll create a new dummy user with
    email: admin@example.com
    password: Admin123!

  12. Run the application Execute:

  13. Navigate to http://localhost:5000/Account/Login in your browser.
  14. create some navigation menus (login, logout, etc) on the homepage
    Create a new file called _NavBar.cshtml in the Views/Shared folder with the following content:
    [codesyntax lang=”html4strict”]

    [/codesyntax]

    Now, let’s include this partial view in your layout file. Open the Views/Shared/_Layout.cshtml file and add the following line just after the opening <body> tag:
    [codesyntax lang=”html4strict”]

    [/codesyntax]
    Note: I need to remove the default <header> tag to use the new partial navbar

  15. create controller for account logout
    modify Controllers/AccountController.cs
    [codesyntax lang=”csharp”]

    [/codesyntax]

    Now, let’s update the _NavBar.cshtml partial view to use a form for the logout action, as it should be a POST request. Update the logout link in the _NavBar.cshtml file like this:
    [codesyntax lang=”html4strict”]


    [/codesyntax]
    at the end of this file, add this javascript
    [codesyntax lang=”html4strict”]

    [/codesyntax]
  16. Add controller for registration and forgot password?

Developing ASP.NET Core Project With VS Code – Razor Pages

ref: https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.2&tabs=visual-studio-code

Create a Razor Pages web app
Type in the terminal

Open it on VSCode

After the status bar’s OmniSharp flame icon turns green, a dialog asks Required assets to build and debug are missing from ‘RazorPagesMovie’. Add them? Select Yes.

A .vscode directory, containing launch.json and tasks.json files, is added to the project’s root directory.

Run the app
On the VSCode, open the terminal by pressing CTRL + ~
then type

NOTE: I FOUND THIS COMMAND: ‘dotnet dev-certs https –trust’ IS NOT WORKING
Then Press Ctrl-F5 to run without the debugger. It’ll open the browser automatically with this url: https://localhost:5001/

Add a data model
Add a folder named Models.
Add a class to the Models folder named Movie.cs.
Add the following properties to the Movie class:

Add a database context class
Add the following RazorPagesMovieContext class to the Data folder:

Add a database connection string
Add a connection string to the appsettings.json file as shown in the following highlighted code:

Add required NuGet packages
Run the following .NET Core CLI command to add SQLite and CodeGeneration.Design to the project:

The Microsoft.VisualStudio.Web.CodeGeneration.Design package is required for scaffolding.

Register the database context
Add the following using statements at the top of Startup.cs:

Register the database context with the dependency injection container in Startup.cs in ConfigureServices function:

Build the project (‘dotnet build’) to verify there are no compilation errors.

 

Scaffold the movie model
In this section, the movie model is scaffolded. That is, the scaffolding tool produces pages for Create, Read, Update, and Delete (CRUD) operations for the movie model.
Install the scaffolding tool:

Run the scaffolding tool to create CRUD for model ‘Movie’:

The scaffold process creates and updates the following files:

Files created
Pages/Movies: Create, Delete, Details, Edit, and Index.
Data/RazorPagesMovieContext.cs
File updated
Startup.cs
The created and updated files are explained in the next section.

 

Install GrandNode On Ubuntu 16.04

ref: https://grandnode.com/how-to-install-grandnode-on-linux-ubuntu-1604

Install GrandNode eCommerce Platform on Ubuntu 16.04 | 18.04 | 18.10

Note: Make sure nginx, dotnet core 2.2 and mongodb 4.0 already installed!

Get and Clone it from github

Deploy and publish GrandNode. Publishing a .NET Core application bundles all the required run-time libraries (in the form of DLL’s) and copies across appsettings.json file as well as any public assets. We need to go to our application’s root directory. We will be able to pull in/download all the required NuGet packages, let’s do that now.

After a while, when it’s completed we can build plugins and publish our application. It compiles our code and bundles all the required dependencies to specific directory.

OR IT’D BE BETTER TO USE SINGLE LINE COMMAND (sudo dotnet build Plugins/Grand.Plugin.ExchangeRate.McExchange && sudo dotnet build Plugins/Grand.Plugin.ExternalAuth.Facebook && sudo dotnet build Plugins/Grand.Plugin.Feed.GoogleShopping && sudo dotnet build Plugins/Grand.Plugin.Payments.CashOnDelivery && sudo dotnet build Plugins/Grand.Plugin.Payments.CheckMoneyOrder && sudo dotnet build Plugins/Grand.Plugin.Payments.PayInStore && sudo dotnet build Plugins/Grand.Plugin.Payments.PayPalStandard && sudo dotnet build Plugins/Grand.Plugin.Shipping.ByWeight && sudo dotnet build Plugins/Grand.Plugin.Shipping.FixedRateShipping && sudo dotnet build Plugins/Grand.Plugin.Shipping.ShippingPoint && sudo dotnet build Plugins/Grand.Plugin.Tax.CountryStateZip && sudo dotnet build Plugins/Grand.Plugin.Tax.FixedRate && sudo dotnet build Plugins/Grand.Plugin.Widgets.GoogleAnalytics && sudo dotnet build Plugins/Grand.Plugin.Widgets.Slider)

Then publish the compiled Grand.Web in /home/teddy/Documents/works/grandnode (NOTE: BE CAREFULL WITH THE COMMAND FROM THE WEBSITE LIKE: sudo dotnet publish Grand.Web –c Release –o /var/webapps/GrandNode. THIS IS BECAUSE  –c AND –o ARE NOT PROPER FONT. IT SHOULD BE -c AND -o ). IF YOU GET THIS ERROR:

IT MEANS THE FONT IS NOT CORRECT (ref: https://github.com/grandnode/grandnode/issues/356). SO HERE IS THE CORRECT ONE:

In the next step we need to set the permissions so that the user that our service is running under (by default this will be www-data in this tutorial) can have the required access rights, we do this by running:

Test locally (https://docs.microsoft.com/en-US/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-2.2)! Go to the root /home/teddy/Documents/works/grandnode. then run ‘dotnet Grand.Web.dll’
(NOTE: NEED TO USE ‘sudo ..’):

Then when I open it on my browser: http://localhost:5000/
I got this error:

SOLUTION: use ‘sudo dotnet Grand.Web.dll’ INSTEAD OF ‘dotnet Grand.Web.dll’

Open it again in my browser: http://localhost:5000
OKAY. The first time it’ll be redirected to install page (http://localhost:5000/install)Here is the install setting:
Admin user email: admin@yourstore.com
Admin user password: teddy
MongoDB Server name: localhost
Database name: grandnode
MongoDB Server Username: grandnodeuser
MongoDB Server Password: grandnode
Then click ‘Install’ button.
wait until the installation is finished with this message

Then shutdown the process in the terminal (CTRL + C) then start again with the above command ‘sudo dotnet Grand.Web.dll’
Then open again in your browser: http://localhost:5000/

Configure NGINX with GrandNode
Everything works fine, but we are not able to connect with our GrandNode from our computer. The reason is simple, GrandNode is running locally on our machine on port 5000. In thix example, we will present the simplest way of reverse-proxy traffic to your application. It will forward traffic from port 80 to your local machine on port 5000.
Create the config file:

Here is the content:

NOTE: IF THIS APP IS NOT RUNNING, PLS COMMENT ‘proxy_pass’ COMMAND ABOVE (OR BETTER ALL ‘proxy_*’). BECAUSE IT’D MAKE NGINX CAN’T EXECUTE THE OTHER LOCAL WEBSITES (BECAUSE OF THE PROXY TO PORT 5000)!!!
then create a symbolic link:

then register the host on my system:

Add this:

Then test: Test: http://grandnode.test/
NOTE: MAKE SURE THE DOTNET APP IS ALREADY STARTED (‘sudo dotnet Grand.Web.dll’). IN THE PROD SERVER, TO MAKE SURE THIS APP ALWAYS START, I CAN CREATE THE SERVICE (SEE: https://docs.microsoft.com/en-US/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-2.2)
Here is the look: http://grandnode.test/apple-macbook-pro-13-inchThe admin page: http://grandnode.test/adminInstall missing package:
he last touches. We need to update packages and install libgdiplus.

 

Install DotNet Core SDK 2.2 For Ubuntu 16.04

Ref: https://dotnet.microsoft.com/download/linux-package-manager/ubuntu16-04/sdk-current

Register Microsoft key and feed
Before installing .NET, you’ll need to register the Microsoft key, register the product repository, and install required dependencies. This only needs to be done once per machine.

Open a terminal and run the following commands:

Install the .NET SDK
Update the products available for installation, then install the .NET SDK.

In your terminal, run the following commands:

OK. Check the dotnet version (dotnet –version) or more complete info (dotnet –info):

 

Create First DotNet App
ref: https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/create

The dotnet command creates a new application of type console for you. The -o parameter creates a directory named myFirstApp where your app is stored, and populates it with the required files. The cd myFirstApp command puts you into the newly created app directory.

The main file in the myFirstApp folder is Program.cs. By default, it already contains the necessary code to write “Hello World!” to the Console.

Run your app
In your terminal, run the following command:

Congratulations, you’ve built and run your first .NET app!

Edit your code
Open Program.cs in any text editor (e.g. Notepad) and add a new line of code below the one that prints “Hello World!”, like the following:

Save the Program.cs file, and run your code again.

Create First ASP.Net App
ref: https://dotnet.microsoft.com/learn/web/aspnet-hello-world-tutorial/create
Create your app
In your terminal, run the following commands:

Run your app
In your terminal, run the following command:

Then open it on your web browser: http://localhost:5000/Edit your code
Open Pages/Index.cshtml in any text editor and replace all of the code with the following:

Save the file then refresh the browser to see the change: