Html Question posted in
Some basic documentation can be found here.

Html – What is the usual way to store an article page in a database?

I’m a learning developer in web technologies, particularly Angular, and I am currently working on the website of our computer science club.

We plan to post some articles, cheatsheets, etc., and we would like to store them in a database with the date, the authors, some tags, a representative image, etc., and most importantly, the content of the article. We would like to do it with a database because we found it to be a common and more practical way, which we agree with.

However, we struggle to find a convenient storage system for the content of the article.

I found this has been already talked in another post :
Using a database to store and get html pages for website

And this made us choose a template system, with different entry in the database that will be placed in different places/way.
But I have some complementary questions.

If I store text, how can I highlight some part of the text ? Like, making a part bold or italic ?
I read that markdown could be an option.

But it lack some personalisation. Imagine I want to add a cool React component in the middle of an article, but only this one. I can’t store it in the database, since my template does not contain an entry for it, only placeholder for text.
Same for images ; if I say in my template that I have one image for the top of the article, every article will have it, because it’s in my template. But what if I want more images in one article ? And not in the others ? There is no placeholder for them since it’s not in my template.

I would like to ask for your opinion and your experience to know what the best solution is. We also did not find a database system for our Angular project, so if you have any propositions, we would gladly take them too since we are not familiar with them yet.
However, we have a way to host the website, a domain name, and the elders of the club proposed that we look at a solution called an "ORM".

Thank you for your help.

Tags:

2

Answers


  1. 0

    Using a database to manage content for your website is a smart move, but figuring out how to handle the dynamic aspects like formatting, embedding components, and managing images can be tricky.

    1. Formatting Text: Storing content in a plain text format like Markdown is a great choice. It allows for basic text formatting like bold and italic, which covers most needs. Plus, Markdown is easy for both humans and machines to read.

    2. Embedding Components: If you want to include dynamic components like a React component within an article, you might need a more flexible solution. One approach is to allow certain tags or placeholders within your text content that your website’s frontend can interpret. For example, you could define a special tag like <react-component> that gets replaced with the actual component when rendering the article on your website.

    3. Handling Images: Similar to embedding components, you could define placeholders within your text content for images. For example, you might use a syntax like ![Image Description](image-url) within your Markdown content. Then, when rendering the article, your frontend can parse these placeholders and insert the appropriate images.

    As for database systems for your Angular project, you might want to look into using an ORM (Object-Relational Mapping) library like TypeORM or Sequelize. These libraries can help you interact with your database using TypeScript or JavaScript, which can be very convenient for Angular projects.

    Using Markdown for text formatting, allowing for dynamic components within articles, and handling images with placeholders are all viable solutions for managing content in your database-driven website. And for database management in Angular, exploring ORM libraries would be a good next step.

    Login or Signup to reply.
  2. 0

    We would like to do it with a database because we found it to be a common and more practical way, which we agree with.

    Well, I don’t agree with this idea. When we can mannage a bried description like a typical shop, have sense use the dbs to store the "info", but when we have a laaarge article, I feel is more logic create an .html

    Imagine your dbs return objects like, e.g.

      {
    title: 'page 1',
    tags: 'info|angular',
    source: 'page1.html',
  },

    You can to have a service like

    @Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(
    private httpClient: HttpClient,
    private sanitizer: DomSanitizer
  ) {}

  listArticles(tagSelected:string[])
  {
     return httpClient.get(your-url?tagSelected.Join('|')
  }

  readArticle(pageHtml: string) {
    return this.httpClient
      .get('assets/' + pageHtml, { responseType: 'text' })
      .pipe(
        map((res: string) => {
          const rx = /(?<=<body>)((.|r|n)*?)(?=</body>)/;
          const rxStyles = /(?<=<style>)((.|r|n)*?)(?=</style>)/;

          const styles = rxStyles.exec(res) || ['', ''];
          const text = rx.exec(res) || ['', ''];
          return this.sanitizer.bypassSecurityTrustHtml(
            '<style>' + styles[1] + '</style>' + text[1]
          );
        })
      );
  }
}

    You can use some like

    <div>
  @for(tag of tags;track $index) {
  <label
    ><input
      type="checkbox"
      [(ngModel)]="tagsSelect[$index]"
      (ngModelChange)="filter()"
    />{{tag}}
  </label>
  }
</div>
@for(article of articlesFiltered|async;track $index) {
<div>
  {{article.title}}
  <a (click)="readArticle(article)">read now!</a>
</div>
}
<div [innerHTML]="data"></div>

    where

      constructor(private dataService: DataService) {}
  readArticle(article: any) {
    this.dataService
      .readArticle(article.source)
      .subscribe((res: any) => (this.data = res));
  }
  filter() {
    const tagSelected = this.tags.filter((x, i) => this.tagsSelect[i]);
    this.articlesFiltered = this.dataService.listArticles(tagSelected)
  }

    In this way, you can to have a serie of "pages.html" in the way

    <!DOCTYPE html>
<html>
<head>
  <style>
    ....
  </style>
</head>
<body>
     ...
</body>

    This allow you to hav pure html pages to your entries of the blog. It’s more easy to any create a page .html (you can see in any navigator, and use any editor) and the table of the dbs it’s more efficience.

    You can see a little example in this stackblitz
    (in the stackblitz I "hardcode" the elements of the table using rxjs operator of and an array that I filter)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search