Creating the blog

In today's blog I'll be talking all about how I created this blog using core 2.0 Razor pages and MarkDown. I'll start from what I wanted, then I'll go on to explain how I implemented it from data to the UI and some of the issues I hit as I worked thought this. In total I spent about 6 hours coding and about an extra 3 hours reading and researching. # Requiments So once I decided I was going to blog I thought I'd roll my own. Well ish anyway as I enjoy MarkDown I decided I wanted to use that and that I should be able to put the posts in to an RSS feed. So my basic requirement when I started turned out to be: - Posts content written in MarkDown - RSS feed data - Ability to add - Ability to edit - Ability to delete - Ability to list all posts in one page (with standard paging for the site) - Admins can see unpublished posts - Unpublished posts not accessible to none admin users # The data storage So armed with my requirements I was able to begin creating the data storage. This was not that bad as I already have a data context for my website this is in a data DLL but that by the by. In my data layer I'm using code first database which I'll write my thoughts on and how I manage that in another blog post. So I started by adding a BlogPost.cs file which thanks to templating in VisualStudio 2019 it created a class "BlogPost" I then added the following members: - Id - Title - Post - Date This class looks like this ``` public class BlogPost { public int Id { get; set; } [Required(), DefaultValue("")] public string Title { get; set; } [Required(), DefaultValue("")] public string Post { get; set; } [Required(), Display(Name = "Date published")] public DateTime Date { get; set; } } ``` As you can see I have set the Title, Post and Date member to be Required. Also Title and Post has a default value of empty string. The Date member has a Display name of Publish date this is the text that is shown in the UI. With the data model created I then added the model as a property to the database context. ``` public DbSet<BlogPost> Posts { get; set; } ``` After that is done I was able to create a migration. Then as that is done I deploy the database to my local database. # CRUD time As with most things in my website I follow the CRUD (create, remove, update and display) pattern this makes it supper easy and quick to add new content that I know will be dynamic. ## Create Following the CRUD methodology I start with creating to do that in my web layer I added a folder into the "Pages" folder with the name of "Blog". Now we have that folder I added a "Add" Razor page this added the following "Add.cshtml" and "Add.cshtml.cs". In the .cs file I added the methods to allow a Get http call and a Post http call. This looks like this: ``` [BindProperty()] public BlogPost PostToAdd { get; set; } public IActionResult OnGet() { return Page(); } public IActionResult OnPost() { if (ModelState.IsValid) { _database.Posts.Add(PostToAdd); _database.SaveChanges(); return Redirect("/Blog"); } return Page(); } ``` In the html I create a form in which I can enter a Title, Post and a date published. (That's actually the form I'm using right now). ## Remove Same as the create section I create a new Razor page but in the html page I don't put much as it should never be shown. This is what I have ``` <div class="row top-Margin p-4 p-md-0"> <div class="col-12"> <h1 class="text-center">Post removed</h1> </div> </div> <script> ``` In the .cs file I have the following in the Get http method ``` public IActionResult OnGet(int id) { _database.Posts.Remove(_database.Posts.Single(x => x.Id == id)); _database.SaveChanges(); return Page(); } ``` That's it easy and simple. ## Update Well I like edit but that's just me. Basically I create another Razor page in the html I recreate the add html with an extra hidden input in the form that holds the Id of the post to edit. In the .cs file I have the following code: ``` [BindProperty()] public BlogPost PostToEdit { get; set; } public IActionResult OnGet(int id) { PostToEdit = _database.Posts.Single(x => x.Id == id); return Page(); } public IActionResult OnPost() { if (ModelState.IsValid) { var entity = _database.Posts.Single(x => x.Id == PostToEdit.Id); entity.Title = PostToEdit.Title; entity.Post = PostToEdit.Post; entity.Date = PostToEdit.Date; _database.SaveChanges(); return Redirect("/Blog"); } return Page(); } ``` As you can see there are a few checks on the post existing which if it doesn't you just get put back to the list page we haven't created yet but that's ok. ## Display Well with all that in place we can now create a list page This page needs to show each post in the database for this I only show the title. As will other pages on the website I have buttons that allow the user to navigate though paging when the list is long. I also have so admin buttons for the admin users which takes me to the pages I created earlier. When you click the title it will open the post. The post has the title then the contents of the post and that's it easy, clean and simple. ## MarkDown Now we are showing the content I had to get the MarkDown to show as HTML this turned out to be harder than it probably should of been. First I tried to do it server side that turned out to waist time that probably due to the package I was using but it also meant I'd have to post back to the sever for a preview in the add and edit page. So after some reading around I found a nice client side JavaScript library [ShowDown]( that allows you to change MarkDown to HTML in the browse that means if the user has JavaScript turned off you only see the MarkDown but that's ok as it's not formatted to bad so sort of readable. Anyway the ShowDown library allowed me to render my blog quickly and also allows me to preview the posts before publishing it. In the options for ShowDown you can change the header value it starts at for headings in the MarkDown for myself I started that at h4 as that fits into my site nicely. # RRS feed Although I did do the RSS feed at the same time I'll do a different post about that as that required some more research and it deserves more attention. # Things to do next So now I have that done as you can see as your reading this there a few things I want to add but don't need right now. - An image for each post so it looks nice in RSS readers and social networks - Social share buttons - comments for logged in users And the we go a blog post about making a blog. thanks for reading.