CSS - Coding Infinite

Using TypeScript with Styled Components

CodingInfinite Staff — Mon, 14 Sep 2020 14:26:22 +0000

Styled-components, what are they? The result of thinking about how to enhance the CSS for component systems styling in React. A JavaScript subset, it mainly provides static classes, interfaces, as well as static typing.

One of the most noticeable TypeScript pros is enabling IDEs to provide a richer environment that could see common errors in code typing. It streamlines Java code, which makes reading and debugging so much easier.

Use TypeScript with Styled Components

It’s great to use styled-components with React, as well as React native. However, it truly shines when using it with VS Code, getting suggestions about the code and errors when writing an error. The components help keep problems regarding the separation of styling and architecture, which makes for a more readable code.

In addition, should there be components relying on JavaScript, the components provide control over the states, and then back to CSS, and not using many conditional class names instead. When transitioning most projects to include TypeScript, some things would feel perfect. Consider checking them out.

1. Types Installation

Styled components do not ship with types. Rather, you need to install it from the repository called the Definitely Typed.

npm i --save-dev @types/styled-components

2. Customized props

Using a CSS in a JavaScript solution has one particular major advantage, and this the ability of passing customized props on the runtime, as well as accordingly adapting CSS.

const HeaderTitle = styled.h1<{ isActive: boolean }>`

color: ${props=>(props.isActive ? 'green' : 'red' )}

`;

Similar to JSX elements, the generic type could be passed after the component with <>. Now, what you have is a typed styled-component, and thus will become a static element error if unable to pass the active prop.

To extend the component, you can use it like this:

import Title from './Title'

const HeaderTitle = styled(Title)<{ isActive: boolean }>`

color: ${props=>(props.isActive ? 'green' : 'red' )}

`;

Keep in mind however that active as a prop is passed to the Title component even if not explicitly stated so. Later, if someone adds an optional prop to the component, this could be a concern. You can nonetheless refactor to avoid this, such as:

const HeaderTitle = styled(({ isActive, ...rest }) => )<{

isActive: boolean;

}>`

color: ${props => (props.isActive ? 'green' : 'red')};

`;</pre>
<p>This syntax however obviously is more intricate, and builds additional component. If the mess is worth uncovering an accidental prop, it would be your decision.</p>
<h3>3. Typing a Theme</h3>
<p>With the help of the ThemeProvider, Styled Components could specify a theme. The autocomplete form itself form the theme object is worth doing even if you steer away from everything else.</p>
<p>The first thing to do is to build a declarations file. For instance, we shall call it styled.d.ts.</p>
<pre>// import original module declarations

import 'styled-components';

// and extend them!

declare module 'styled-components' {

export interface DefaultTheme {

fontSize:{

body: string;

h1: string;

h2: string;

h3: string;

h4: string;

h5: string;

h6: string;

},

colors: {

main: string;

secondary: string;

};

}

}</pre>
<p>Typing the theme manually like this is hard however, mainly due to the fact that every time you add or remove something form the theme object, you have to edit a couple of files. Rather, consider doing this:</p>
<pre>import {} from 'styled-components';

import myTheme from '../custom-theme';

declare module 'styled-components' {

type Theme = typeof myTheme;

export interface DefaultTheme extends Theme {}

}</pre>
<p>We make use of the type inference of TypeScript here for the theme object to do it.</p>
<h3><strong>4. Using the CSS Prop</strong></h3>
<p>In the Styled Components documentation, there are a couple of CSS functions. Here specifically is the attribute of CSS that could be utilized on an element when a Babel plugin is enabled.</p>
<pre><div

css={`

display: block;

`}

>

...

</div></pre>
<p>Unfortunately, TypeScript does not know about this CSS property, and makes an error.</p>
<p>To resolve this, consider the following styled.d.ts:</p>
<pre>import {} from 'styled-components';

import { CSSProp } from 'styled-components';

declare module 'react' {

interface Attributes {

css?: CSSProp | CSSObject;

}

}</pre>
<h3><strong>5. The Media Templates</strong></h3>
<p>Specifying media queries from documentation has an easy way. However, while the syntax is user-friendly, the implementation is difficult to reason for TypeScript, and for new users too as it happens. Consider the following seamless option:</p>
<pre>const customMediaQuery = (maxWidth: number) => `@media (max-width: ${maxWidth}px)`;

const media = {

custom: customMediaQuery,

desktop: customMediaQuery(992),

tablet: customMediaQuery(768),

phone: customMediaQuery(576),

};

const ContentBlock = styled.div`

width: 4em;

height: 4em;

background: white;




/* Now we have our methods of raw queries */




${media.desktop} {

background: green;

}

${media.tablet} {

background: yellow;

}

${media.phone} {

background: blue;

}

`;

render(<ContentBlock />);</pre>
<h2><strong>The Pros of TypeScript</strong></h2>
<ul>
<li>Helps deal with growing teams</li>
<li>Code scalability</li>
<li>Compliance to ES-next</li>
<li>Awesome tooling and community effort</li>
<li>Types boost agility when refactoring. It’s also better for a compiler to catch errors than having things fail during runtime</li>
<li>Have a proven ability of enhancing the quality and understandability of code.</li>
<li>With typing, it provides a taste of the future of JavaScript</li>
<li>One of the best forms of documentation.</li>
<li>With auto-injection libraries combined, the code-base is truly predictable and maintainable.</li>
<li>The dependency injection opens up a lot of opportunities for cool testing, and make sure that the APIs are controller-based.</li>
<li>The Dependency Injections makes for easy testing.</li>
<li>Supports change and innovation, with safety measures that ensure it won’t entirely go the wrong way.</li>
<li>Helps in the implementation of sturdy design patterns into a language that does not really support it.</li>
<li>Make more readable code, helping developers remember what every code piece is supposed to do fast.</li>
<li>Could compile down to a JavaScript version, which runs on all browsers.</li>
<li>The code completion IntelliSense provides active hints that a code is being added.</li>
<li>Very easily write pure TypeScript object-oriented code with less knowledge.</li>
<li>The static typing feature detects a bug or bugs as a developer is writing the scripts. This enables a developer to write more sturdy code, maintain it, which result in cleaner, better code.</li>
<li>TypeScript tools make refactoring faster and easier.</li>
</ul>
<h2><strong>Why Styled Components?</strong></h2>
<p><strong>1. Makes less bulky components.</strong> There would be plenty of heavy lifting done via the CSS for injecting styling towards a component that’s user-centered. Majority of the methods id render components end up with style objects, which clutter and splits the CSS into two, making the code parsing process difficult. Styled components however keep the element architecture and styling separated, and make more readable components.</p>
<p><strong>2. CSS Function.</strong> Props could be used to render CSS conditionally, meaning that there’s no need to render conditional classes names that are props-based. This minimizes components clutter, and maintaining a separation of issues between JavaScript and CSS.</p>
<p><strong>3. ThemeProvider.</strong> Severing as the wrapper, it injects props into all the child components. It’s significantly useful when creating a ‘configuration’ page, which is a duplicate page essentially, letting users perform customizations to specific stylistic elements, such as color in particular.</p>
<p><strong>4. Test.</strong> Testing of the styled components is painless through building class names that are consistent. Moreover, it also enables asserting certain CSS rules, which could be relevant to the app’s integrity.</p>
<p><strong>Conclusion</strong></p>
<p>Styled-components overall, have made creating apps with TypeScript more enjoyable. The styles are a neat approach to scoping styles. TypeScript could be leveraged to have a strong-typing in props passed to the styled components.</p>
<p>The styled components have over 5.7 million downloads per month from npm, more than 27.8 GitHub stars, as well as hundreds of open source contributors, thus it’s here to stay.</p>
<p><strong>Author Profile:</strong></p>
<p><em>V K Chaudhary working as a project manager in a software development company </em><a href="proxy.php?url=https://www.tatvasoft.com/"><em>Tatvasoft.com</em></a><em>. He is a technical geek and also managing some online campaigns for his company. </em></p>
<p>The post <a href="proxy.php?url=https://codinginfinite.com/using-typescript-with-styled-components/">Using TypeScript with Styled Components</a> appeared first on <a href="proxy.php?url=https://codinginfinite.com">Coding Infinite</a>.</p>

</article>
<article>
<h1>11 Best HTML Website Templates For Your Next Project</h1>
<p>CodingInfinite Staff — Wed, 23 Oct 2019 09:36:12 +0000</p>

<p>Nowadays, it’s not easy to choose a way to build a website. You can:</p>



<ul><li>hire a specialist;</li><li>choose a CMS;</li><li>use one of the programming languages.</li></ul>



<p>Each option has pros and cons. In this article, I will focus on the HTML CSS website templates. HTML was at the source of the website building. Even now, CMS websites go through several stages before taking the usual form:</p>



<ol><li>The server executes a PHP website’s version to put together an HTML version of the website.</li><li>It reaches the database to insert content into an HTML website.</li></ol>



<p>It doesn’t matter if you use WordPress or HTML. It all comes to HTML on the frontend.</p>



<p>So, despite a wide choice of ways to create a website, HTML doesn’t lean back. It still has benefits for web developers. To save time, you can use a ready-made template. A template from the reliable source already has a clean code. It means that you:</p>



<ul><li>have no or few problems with a code;</li><li>can change the code and the look of a website fast.</li></ul>



<p>Below, you can check out 11 <a href="proxy.php?url=https://www.templatemonster.com/best-selling-website-templates/?aff=codinginfinite">top web templates</a>. They are good for creating an online store, portfolio, personal or business website. There are multipurpose options. Before, I offer you to look at the pros of the HTML website.</p>



<p>So, let’s start.</p>



<h2 class="wp-block-heading">Advantages of Website Template HTML and CSS</h2>



<p>There are pros of both using programming languages and CMS to build a website. First, it’s a matter of tastes and skills. Not everyone can code. In this case, the drag-and-drop nature of CMS comes in handy. Still, if you know HTML, you can face the following pros.</p>



<h3 class="wp-block-heading">HTML websites are SEO-friendly</h3>



<p>Every browser can interpret HTML code. Unlike the Flash websites, for instance, that need a Flash Player. If the user’s browser doesn’t have it, the website won’t work. It doesn’t mean that Flash websites are evil. It all comes to the question of your needs. Flash websites can handle a big number of pictures and videos. In this case, the HTML website might not work so good.</p>



<p>Furthermore, an HTML website is lightweight. It means that it will load faster. It’s good for SEO optimization. Yes, it’s possible to optimize a CMS website for speed too. Still, you will use extra plugins. Why do it if you can avoid those extra steps?</p>



<h3 class="wp-block-heading">HTML websites are easy to edit</h3>



<p>Yes, there are no admin panels with dozens of options. For some people, it might be a disadvantage. For me, it’s easier and faster to use Notepad to edit pages this way. All you need to do to make changes is to use tags.</p>



<p>If you know how to code, it shouldn’t be a big deal.</p>



<h3 class="wp-block-heading">No need to worry about updates</h3>



<p>It’s important to keep a track of the CMS theme updates. I don’t mention the perks the updated versions contain. The question of security is more important. A big number of hacking attacks happens because of old themes and plugins.</p>



<p>With HTML, you don’t have to worry. You don’t have updates itself.</p>



<p>Besides, HTML has all tags for adding and organizing content. You can add graphics, multimedia, tables, hyperlinks, etc. Such elements help improve UX.</p>



<p>That was a tiny part of the HTML website pros. If you still want to build one, think about using one of the <a href="proxy.php?url=https://www.templatemonster.com/website-templates.php?aff=codinginfinite"><strong>HTML5 web templates</strong></a>.</p>



<h2 class="wp-block-heading">Lintense – All-in-one Landing Page Template</h2>



<div class="wp-block-image"><figure class="aligncenter"><a href="proxy.php?url=https://www.templatemonster.com/landing-page-template/all-in-one-landing-page-lintense/?aff=codinginfinite"></a></figure></div>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/landing-page-template/all-in-one-landing-page-lintense/?aff=codinginfinite">Details</a></strong></p>



<p>Lintense contains 9 ready-made landing page themes. There are skins for several niches:</p>



<ul><li>corporate agency;</li><li>SEO company;</li><li>digital agency;</li><li>medicine.</li></ul>



<p>You can create one product, mobile app, eBook, or course presentation. Lintense has instruments for promotion. It focuses on SEO. Thus, your presentation will be visible to the audience.</p>



<p>Plus, it’s responsive. It means that it will look the same on all devices. It also helps the website be on the top of the search results.</p>



<p>You will use the Novi Builder to create a page. This HTML page builder is one of the easiest to use. You can both access the source code or use ready-made blocks.</p>



<div class="wp-block-image"><figure class="aligncenter"></figure></div>



<p>It has useful plugins and visual elements. Novi Builder offers free themes and plugins.</p>



<figure class="wp-block-image"></figure>



<p>So, creating pages is fast and easy.</p>



<p>Besides, Lintense has:</p>



<ul><li>Visual Editor;</li><li>4 Gallery scripts;</li><li>2 Web Forms;</li><li>HTML plus JS animation;</li><li>Parallax;</li><li>Back to Top button;</li><li>24/7 support.</li></ul>



<p>The vendor releases updates that have new skins and features. The clinic skin is coming soon.</p>



<h2 class="wp-block-heading">Multipurpose Website Template Intense</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/intense-multipurpose-html-template.html?aff=codinginfinite"></a></figure>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/intense-multipurpose-html-template.html?aff=codinginfinite">Details</a></strong></p>



<p>This bestseller suits any kind of website. It has 500+ HTML ready to use pages:</p>



<ul><li>50+ one-page and multipurpose templates;</li><li>30+ blog templates;</li><li>20+ portfolio templates;</li><li>10+ eCommerce shop templates.</li></ul>



<figure class="wp-block-image"></figure>



<p>Besides, it has a toolkit for web design. Among the major features are:</p>



<ul><li>200+ reusable elements;</li><li>15+ sliders with 20 templates;</li><li>15+ header & footer styles;</li><li>2000+ font icons;</li><li>300+ PSD files;</li><li>Ajax forms;</li><li>sidebar widgets;</li><li>Responsive slider;</li><li>Touch Swipe photo gallery;</li><li>unlimited color options;</li><li>sticky menus;</li><li>Revolution slider with 15+ effects;</li><li>hover effects.</li></ul>



<p>There are even more features:</p>



<figure class="wp-block-image"></figure>



<p>In total, Intense has 29 niche demos. This multipurpose template will suit:</p>



<ul><li>any kind of business;</li><li>medicine;</li><li>any type of a shop;</li><li>presentation of any product;</li><li>any kind of landing page;</li><li>blog.</li></ul>



<p>Intense is compatible with Novi Builder. It makes the theme’s functionality even larger.</p>



<p>After a buy, you get lifetime updates.</p>



<h2 class="wp-block-heading">Spinecare – Medical Website Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://novibuilder.com/medical-website-template"></a></figure>



<p><strong><a href="proxy.php?url=https://novibuilder.com/medical-website-template">Details</a></strong></p>



<p>Spinecare suits the website for the healthcare industry. It’s perfect if you want to present the massage services. It has 25+ HTML ready-made pages. With Novi Builder, you will create pages fast. You can either dive into code or use pre-built elements.</p>



<p>Besides, the template has:</p>



<ul><li>Visual Content Editor;</li><li>CSS3 animations and transitions;</li><li>3 Blog layouts;</li><li>Contact, Newsletter, and Subscription forms;</li><li>Gallery layouts;</li><li>header and footer styles;</li><li>many UI elements and ready-made blocks.</li></ul>



<figure class="wp-block-image"></figure>



<p>The template goes with free pictures on medical topics.</p>



<figure class="wp-block-image"></figure>



<h2 class="wp-block-heading">Brave Responsive Multipurpose Website Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/website-templates/62466.html?aff=codinginfinite"></a></figure>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/website-templates/62466.html?aff=codinginfinite">Details</a></strong></p>



<p>Brave comes with 11 niche themes that are suitable for:</p>



<ul><li>IT company;</li><li>environmental project;</li><li>trucking company;</li><li>SEO company;</li><li>private airlines;</li><li>taxi service;</li><li>maritime company;</li><li>museum;</li><li>auction;</li><li>theater;</li><li>movies.</li></ul>



<figure class="wp-block-image"></figure>



<p>Besides, the theme is editable. For this purpose, you have:</p>



<ul><li>Novie Builder;</li><li>Visual Page Builder;</li><li>10+ navigation and footer styles;</li><li>150+ of pre-made elements and blocks;</li><li>Parallax effect;</li><li>Blog and Gallery layouts;</li><li>eCommerce templates;</li><li>social and visual widgets;</li><li>working Ajax forms via PHP;</li><li>Background Video.</li></ul>



<figure class="wp-block-image"></figure>



<p>In total, Brave comes with 100+ HTML ready to use pages. You can change the source code. Also, you can just fill the theme with content. Web developers will feel comfortable working with Brave. It has a flexible grid system, universal scripts. It has sources on PUG and SCSS processors.</p>



<p>The theme comes with 24/7 support. It has all images and PSD files from the demo.</p>



<h2 class="wp-block-heading">Massive – StartUp Company Website Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://novibuilder.com/startup-company-website-template"></a></figure>



<p><strong><a href="proxy.php?url=https://novibuilder.com/startup-company-website-template">Details</a></strong></p>



<p>Massive is another multipurpose solution. You can edit it according to your project. For editing, it has:</p>



<ul><li>several page designs;</li><li>4 blog layouts;</li><li>Novi Builder;</li><li>headers, footers, content boxes;</li><li>Gallery layouts;</li><li>working forms;</li><li>set of sliders;</li><li>Parallax sections;</li><li>Retina homepage.</li></ul>



<p>Besides, it has pixel-perfect typography. If you focus on presenting content, then this feature comes in handy.</p>



<p>Massive has a Bootstrap framework. Lots of things are easier with frameworks. For instance, you shouldn’t care much about the pixel width. The framework takes care of the sidebar standards. So, the sidebars will adjust to the widgets or images.</p>



<p>Of course, the framework allows you not diving into code. No need to write from scratch. Moreover, it will remember all the changes you did on each page. No need to say that it works well with all of the browsers.</p>



<p>Its main pro lies in saving the time.</p>



<h2 class="wp-block-heading">Real Estate Multipurpose HTML Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/website-templates/real-estate-multipurpose-html5-website-template-73337.html?aff=codinginfinite"></a></figure>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/website-templates/real-estate-multipurpose-html5-website-template-73337.html?aff=codinginfinite">Details</a></strong></p>



<p>Planning to build a real estate website? Then, this multipurpose HTML template can be the right choice. It has plenty of tools for a user-friendly layout and high performance. You can create tables to present the real estate. You can add forms to get feedback from the clients. It’s possible to add sliders with trademarks.</p>



<figure class="wp-block-image"></figure>



<p>Besides, the template has:</p>



<ul><li>30+ HTML pages;</li><li>header and footer layouts;</li><li>Megafooter;</li><li>Blog and Gallery layouts;</li><li>a set of UI elements and blocks;</li><li>3 Home Page layouts;</li><li>fonts and colors.</li></ul>



<figure class="wp-block-image"></figure>



<p>It also has PSD files.</p>



<h2 class="wp-block-heading">Infradust – Engineering Website Templates</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://novibuilder.com/industrial-engineering-website-templates"></a></figure>



<p><strong><a href="proxy.php?url=https://novibuilder.com/industrial-engineering-website-templates">Details</a></strong></p>



<p>Websites for industrial companies can look good. InfraDust proves this idea. It has plenty of editable pages. You can create such pages as:</p>



<ul><li>Home;</li><li>About Us;</li><li>Careers;</li><li>Mission;</li><li>Social Policy;</li><li>Contact Us.</li></ul>



<figure class="wp-block-image"></figure>



<p>You can use the Visual Content Editor. It’s possible to change the code. The template has clean HTML, SCSS, Pug, JS source files. It also has:</p>



<ul><li>7 Blog layouts + Blog Timeline;</li><li>Contact Form;</li><li>header and footer styles;</li><li>Grid, masonry, cobbles Gallery layouts;</li><li>a set of UI elements and blocks;</li><li>Google fonts;</li><li>CSS3 animation effects and transitions.</li></ul>



<figure class="wp-block-image"></figure>



<p>The layout is responsive and optimized toward search engines. The template has images from the demo.</p>



<h2 class="wp-block-heading">Unit HTML5 Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/website-templates/unit-multipurpose-modern-bootstrap-4-website-template-85269.html?aff=codinginfinite"></a></figure>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/website-templates/unit-multipurpose-modern-bootstrap-4-website-template-85269.html?aff=codinginfinite">Details</a></strong></p>



<p>This web design HTML template suits such niches as:</p>



<ul><li>car and bike repair company;</li><li>farm;</li><li>church;</li><li>marketing agency;</li><li>perfume shop;</li><li>diving;</li><li>event planner.</li></ul>



<figure class="wp-block-image"></figure>



<p>New micro-niche themes are coming soon. The template comes with plenty of pros:</p>



<ul><li>tons of blocks and elements;</li><li>responsive design;</li><li>clean code;</li><li>regular updates.</li></ul>



<figure class="wp-block-image"></figure>



<p>It has a variety of ready-made pages, header and footer styles. You can add plugins and elements to the pages. The template has:</p>



<ul><li>Swiper Slider;</li><li>Call to Action button;</li><li>Blog and Portfolio layouts;</li><li>Shop pages;</li><li>pricing tables;</li><li>subscription forms;</li><li>contacts.</li></ul>



<p>It goes with 24/7 support.</p>



<h2 class="wp-block-heading">Fasteria – Fast Food Website Templates</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://novibuilder.com/fast-food-website-template"></a></figure>



<p><strong><a href="proxy.php?url=https://novibuilder.com/fast-food-website-template">Details</a></strong></p>



<p>This responsive template suits the fast-food restaurant website. Fasteria has:</p>



<ul><li>a huge set of UI elements and blocks;</li><li>3 Blog layouts;</li><li>contact form;</li><li>Parallax effect;</li><li>Google Map;</li><li>Gallery layouts;</li><li>Newsletter and Subscription forms;</li><li>CSS3 animation effects and transitions.</li></ul>



<figure class="wp-block-image"></figure>



<p>It uses a Bootstrap framework. Thus, it is 100% responsive. The developers optimized it toward search engines.</p>



<figure class="wp-block-image"></figure>



<p>It’s easy to organize content in blocks, add sliders, menus, sidebars.</p>



<h2 class="wp-block-heading">The Future Multipurpose HTML5 Template</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/website-templates/the-future-web-design-multipurpose-html5-website-template-69536.html?aff=codinginfinite"></a></figure>



<p><strong><a href="proxy.php?url=https://www.templatemonster.com/website-templates/the-future-web-design-multipurpose-html5-website-template-69536.html?aff=codinginfinite">Details</a></strong></p>



<p>The Future is a universal solution for many business niches. It’s editable and has a powerful toolkit:</p>



<ul><li>Stick-to-top menu;</li><li>header and footer layouts;</li><li>Megafooter;</li><li>contact form;</li><li>400+ UI elements and blocks.</li></ul>



<figure class="wp-block-image"></figure>



<p>You can create a unique design of the website using:</p>



<ul><li>Swiper Slider;</li><li>Owl Carousel;</li><li>Parallax;</li><li>Video background;</li><li>Mail form;</li><li>Search form;</li><li>Gallery layouts with Hover effect;</li><li>Google and Icon fonts.</li></ul>



<figure class="wp-block-image"></figure>



<p>It has 60+ ready-made responsive free HTML pages.</p>



<h2 class="wp-block-heading">PixLab – Software Company Website Templates</h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://novibuilder.com/software-company-website-template"></a></figure>



<p><strong><a href="proxy.php?url=https://novibuilder.com/software-company-website-template">Details</a></strong></p>



<p>This multipurpose template suits the website of a software company. It has plenty of pages that you can change with the tools:</p>



<ul><li>a rich UI kit;</li><li>layouts for Blog and Gallery (Grid, masonry, cobbles);</li><li>Google Map;</li><li>fonts;</li><li>Parallax;</li><li>Contact, Newsletter, Subscription forms;</li><li>header and footer styles.</li></ul>



<figure class="wp-block-image"></figure>



<p>CSS3 animations and transitions.</p>



<figure class="wp-block-image"></figure>



<h2 class="wp-block-heading">Sum Up</h2>



<p>This was a collection of <strong>easy HTML website templates</strong>. Using one, you will create a good-looking website that will work smoothly. The templates have modern page builders inside. They offer kits with plenty of tools for web design. Besides, you can change the code. The developers used a clean code that you can modify without problems.</p>



<p>Though it’s all about tastes and skills, <strong>HTML templates </strong>have pros. They are light, familiar to all browsers and search engines. They don’t need updates. Working with them while creating a website is easy.</p>



<p>For this collection, I picked up the worthy options. You can use most of them for different purposes. I hope that you found a good fit for your project. Stay tuned for more templates overviews.</p>



<p>Here’s Another Article You Might be Interested: </p>



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-coding-infinite"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="AqE3Cjpg0p"><a href="proxy.php?url=https://codinginfinite.com/top-10-most-impressive-admin-templates/">10 The Most Impressive Admin Templates</a></blockquote>
</div></figure>
<p>The post <a href="proxy.php?url=https://codinginfinite.com/best-html-website-templates-front-end/">11 Best HTML Website Templates For Your Next Project</a> appeared first on <a href="proxy.php?url=https://codinginfinite.com">Coding Infinite</a>.</p>

</article>
<article>
<h1>10 The Most Impressive Admin Templates</h1>
<p>CodingInfinite Staff — Fri, 18 Oct 2019 07:49:11 +0000</p>

<p><strong>Bootstrap 4</strong> and <strong>Angular 7</strong> are buzzwords. These top frameworks guarantee a stable work, responsive design, and absolutely clear structure. These key points are highly expected when you start searching for an admin dashboard template.</p>



<p>There are always two ways of choosing the HTML dashboard template:</p>



<ul><li>free templates</li><li>premium templates</li></ul>



<p>Everyone knows that more <strong>power, reliability, and productiveness</strong> is real to find in Premium templates. For this reason, I propose you to look at the 10 <strong>most attractive and forcefull HTML5 Bootstrap admin templates</strong>. Then learn some <em>exceptional features</em> about these beauties, <em>try demos and choose the best one</em>. I’m sure you can find something really blue-chip and become the owner of a top-notch admin dashboard.</p>



<p><em>It’s enough to play for time! Let’s get started!</em></p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/58393.html?aff=codinginfinite">MonsterAdmin Dashboard</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/58393.html?aff=codinginfinite"></a></figure>



<p>This is extremely important to have attractive and colorful <a href="proxy.php?url=https://www.templatemonster.com/admin-templates.php?aff=codinginfinite">dashboard designs</a>. It has been proved that pleasant colors make you feel better. Especially, if you are working in front of HTML admin for long hours. These vibrant colors will truly make your life more vivid and break the monotony.</p>



<p>Of course, the layout is significant but what about the inner world of the <strong>MonsterAdmin dashboard</strong>? This template has recently got a powerful update and is ready to show itself to the world.</p>



<p>There are some must-read and brand-new features about this beauty:</p>



<ul><li>It’s easy to work with thanks to <strong>updated JS core</strong>. Now you have an ability to see absolutely <strong>understandable and structured code</strong>. Front-end developers will be excited!</li><li>No way without <strong>Bootstrap 4</strong>, and it’s here for you. Use it thoroughly.</li><li>Are there people who haven’t got any gadgets? The answer is clear so that the template is <strong>fully responsible and mobile-friendly</strong>.</li><li>Migration to <strong>PUG</strong> and <strong>Sass</strong>.</li><li>Also, it includes a <strong>dropdown menu, Google maps, favicon, extra pages layouts</strong>.</li><li>HTML5 dashboard template contains a <strong>parallax effect</strong>, which will do your scroll more visual and appealing.</li></ul>



<figure class="wp-block-image"></figure>



<p>It includes all the possibilities to keep an eye on the web traffic, control the number of clients and be sure in your dashboard.</p>



<figure class="wp-block-image"></figure>



<p>Choosing the <strong>MonsterAdmin dashboard</strong> you will save plenty of time, have fun and become a happy owner of the Premium admin dashboard HTML template.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/ready-pro-bootstrap-dashboard-admin-template-68899.html?aff=codinginfinite">Ready Pro Bootstrap Dashboard Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/ready-pro-bootstrap-dashboard-admin-template-68899.html?aff=codinginfinite"></a></figure>



<p>Now take a look and the next HTML dashboard template, which is waiting for you to help with all your projects. <strong>Ready Pro Bootstrap Dashboard</strong> is one of those Bootstrap admin templates that will gain your heart from the very beginning.</p>



<p>Right here is an example of good-looking and the fastest dashboards. Its clean design attracts anybody. The main thing you must check out of this template is <strong>highlighting in hover</strong>. Here’s highlighting, there’s highlighting, everywhere’s highlighting. It makes any admin alive.</p>



<figure class="wp-block-image"></figure>



<p>Not by highlighting alone! This pretty and forcefull admin dashboard template is feature-rich. So, what does this richness consist in?</p>



<ul><li>The abundance of <strong>different UI components</strong>. For example, <strong>more than 100</strong>, and each of them is your endless usage.</li><li><strong>Responsiveness is must-have</strong> today, so apply it everywhere you want. This template will look perfect on any gadget.</li><li><strong>Customizable colors of the layout</strong>. You don’t need to do a big number of actions to change color. Also, it’s possible to edit topbar, sidebar and logo header appearance to your taste.</li><li>It goes without saying that the <strong>Bootstrap4 framework</strong> runs the world. And this dashboard, too.</li><li>nearly forgot to mention that it contains <strong>17 customizable plugins</strong>. Be sure that all the plugins are necessary and won’t stop the speed of dashboard working.</li></ul>



<figure class="wp-block-image"></figure>



<p>This Ready Pro Admin template says all by itself. Look at the preview to be convinced by yourself.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/ecab-taxi-admin-bootstrap-4-material-admin-template-76278.html?aff=codinginfinite">ECab – Taxi Admin Bootstrap 4 Material Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/ecab-taxi-admin-bootstrap-4-material-admin-template-76278.html?aff=codinginfinite"></a></figure>



<p>Sometimes it’s hard enough to get a desirable dashboard. Especially, if we are speaking about the admin which you can apply both in your own projects and for your clients. Everybody wants to find something personal and original. Something that will be really appealing but simple at the same time.</p>



<p>There’s a solution which is called <strong>ECab – Taxi Admin Template</strong>. This one looks absolutely structured. It contains plenty of roundish elements that are a delight to the eye. Pleasant and calm colors will make a relaxing atmosphere. It’s significantly for your eyes!</p>



<figure class="wp-block-image"></figure>



<p>Let’s get to know this simple dashboard HTML template better and study some of the secrets in this stunning template.</p>



<figure class="wp-block-image"></figure>



<p>The latest <strong>Bootstrap 4</strong> is already in this admin.</p>



<ul><li>You will get <strong>2 absolutely different dashboards in one template</strong>. What can be more beneficial?</li><li>This pretty ECab comes with the pack of <strong>Material Design Lite Components</strong>. This is a good opportunity to implement Material Design on the website. All your web projects will be marvelous and attractive.</li><li>How many pages are you expecting to see over the template? Get ready because there are <strong>200+ HTML5 pages</strong> for any of your needs.</li><li>The developers don’t forget about the <strong>jQuery Plugins</strong> and include the most powerful and popular plugins.</li><li>Choose any you want! <strong>5 Different Layouts Desktop</strong> and each of them is extraordinary and remarkable.</li></ul>



<p>So, don’t be shy and test the demo to see for yourself.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/atlantis-bootstrap-4-dashboard-admin-template-75937.html?aff=codinginfinite">Atlantis – Bootstrap 4 Dashboard Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/atlantis-bootstrap-4-dashboard-admin-template-75937.html?aff=codinginfinite"></a></figure>



<p>What a great variety of HTML5 Bootstrap admin templates! Dollars to doughnuts that you have no idea which one to choose so there is cheering news. Give a tumble on the next no less beautiful than the other admin themes.</p>



<p><strong>Atlantis</strong> tells its own tale. It’s full of various UI elements, it’s ready to save your time on designing the dashboards and just enjoy your work to the max.</p>



<figure class="wp-block-image"></figure>



<p>Do you want to go to bed early and with the high-qualified made-up admin? So, don’t go by the next features and think of it.</p>



<ul><li>The first hot feature is having <strong>26 absolutely customized plugins</strong>. You will get only the most productive and Successful plugins which guarantee you a stable and smooth work process.</li><li><strong>Responsive design</strong> is a thing that should be in all of the contemporary templates. Mainly, if it’s a dashboard and you want to have the ability to use it via any gadget.</li><li>If your project has an individual branding and I’m sure it’s a right, this feature is yours. All the <strong>layouts and colors are customizable</strong>. Use something that you really want.</li><li><strong>Wow! UI kit</strong>. The number of different components is <strong>100+ components</strong> and they include such staff as charts, notifications, maps, buttons, inputs, etc. All you need in one dashboard.</li></ul>



<figure class="wp-block-image"></figure>



<p>That beauty is really worth your attention. Frankly, there are a lot of surprises inside. Just don’t wait for a moment and try it by yourself.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/iboard-multipurpose-dashboard-creative-admin-template-86053.html?aff=codinginfinite">iboard Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/iboard-multipurpose-dashboard-creative-admin-template-86053.html?aff=codinginfinite"></a></figure>



<p>Now you will be extremely satisfied with the next Bootstrap 4 admin template. <strong>Iboard Multipurpose Dashboard Template</strong> is here to present the unbelievable and forceful user experience. This sample is clear and creative. This is a great example of the admin tool that you were looking for all this time.</p>



<figure class="wp-block-image"></figure>



<p>It allows you to track the necessary statistics such as sales, browser shares, subscribers and so on. Also, you can keep under control the web traffic. The chat and notification system are at your service and placed in a convenient and elegant header.</p>



<p>Propose to be closer to this perfect HTML admin template and learn some of the highly useful features.</p>



<figure class="wp-block-image"></figure>



<ul><li>Of course, the <strong>Bootstrap 4 framework</strong> will fix up with fast and confident work.</li><li><strong>HTML and CSS compiling by Pug and Saas</strong>.</li><li>The large set of <strong>third-party plugins</strong>. There are such additions as <strong>Summernote, Tag-manager, Color picker, Easy zoom</strong> and great amount of others. You can see the whole list below and then try it by yourself on the demo.</li><li><strong>Browser compatibility</strong> isn’t the last thing today. <strong>Chrome, Safari, Edge, Firefox</strong> – use each of them without any doubts because the Iboard can work well there.</li><li>Full component approach code.</li><li>80+ exceptional UI components are there and ready to make the dashboard more active.</li><li><strong>More than 60 pages</strong> to all tastes and needs. Just adjust what you want.</li></ul>



<p>And remember that modern editor open the brand-new possibilities to a webmaster. So, don’t be shy to use it all out.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/iodashboard-intuitive-dashboard-admin-template-84403.html?aff=codinginfinite">IoDashboard Dashboard Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/iodashboard-intuitive-dashboard-admin-template-84403.html?aff=codinginfinite"></a></figure>



<p>Are you still looking for a helpmate in your business? There is something more than just a helpmate. This is a real controller and developer of any of your business and project. <strong>IoDashboard – Intuitive Dashboard Admin Template</strong> is such a thing I was talking about.</p>



<ol><li><em>Do you need an easy but functional dashboard?</em></li><li><em>Have you been dreaming of stable communication with the clients and enjoying their growing?</em></li><li><em>Or have you been wondering which browser is the most popular and convenient among your clients?</em></li></ol>



<figure class="wp-block-image"></figure>



<p>All of these questions are about <strong>IoDashboard</strong>, let’s dive in. And who knows, maybe this is an HTML5 dashboard template of your dreams. Here are core features that will help you to beef up knowledge about the template before your personal trying.</p>



<figure class="wp-block-image"></figure>



<ul><li>Choose your favorite dashboard style. This user-friendly template comes with <strong>2 shining dashboards</strong>.</li><li>Don’t you love various pages? More pages, more variants for choosing. The <strong>IoDashboard</strong> contains <strong>60+ pages</strong>, and 20 of them are ready-made. Just look, test and enjoy!</li><li>Full component approach to code. Now the reliance of your work is much higher.</li><li><strong>Bootstrap 4</strong> framework.</li><li>Full set of <strong>third-party plugins</strong> (Content Editors, Image Tools, Form Plugins, other powerful and useful add-ons).</li><li>Don’t be afraid to use <strong>E-Commerce</strong> with this admin template. Be sure you will know about all the incomes and even more.</li></ul>



<p>The <strong>IoDashboard</strong> will not leave you without any good impressions. Zemez team worked hard to create such a professional and reliable product.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/datta-able-angular-7-admin-template-78804.html?aff=codinginfinite">Datta Able Angular 7 Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/datta-able-angular-7-admin-template-78804.html?aff=codinginfinite"></a></figure>



<p>The latest technologies are extremely important in modern life. Web development is progressing every day and it is highly important to be on the top. Each developer team tries to create something new and embed the latest update inside of the product.</p>



<p><strong>Datta Able Angular 7 Admin Template</strong> is extremely modern as there are such forcefull technologies as <strong>Bootstrap 4</strong> and <strong>Angular 7+</strong>. These top most used frameworks nowadays and both of them have inserted inside this pretty admin template.</p>



<figure class="wp-block-image"></figure>



<p>Also, there are <a href="proxy.php?url=https://angular.io" target="_blank" rel="noreferrer noopener">Angular 7</a> materials to read and be aware of.</p>



<p>So, it is time to see the main advantages of this template.</p>



<figure class="wp-block-image"></figure>



<ul><li><strong>1000+ UI elements</strong>. Yes, more than one thousand and this is a truth. <strong>Datta Able</strong> contains all the elements and even more</li><li><strong>70+ third-party plugins</strong> are as well integrated. These are different tools of Content Editors, Image Tools, Form Plugins, other powerful and useful add-ons</li><li>5+ <strong>web applications</strong> such as a gallery, task, to-do, calendar and other</li><li><strong>150 widgets</strong> that are already designed and ready to be involved in your projects</li><li>Charts are highly important to use. They show <strong>complicated ideas in a simple way</strong>, so use it in full. Because there are <strong>more than 40 Charts</strong>.</li><li><strong>Different demos</strong>. It comes with some types of demo version and each of them will be in the purchase package.</li></ul>



<p>As you understand Datta Able includes a variety of surprises. You need just to try it yourself.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/neon-responsive-bootstrap-4-ui-kits-admin-template-75197.html?aff=codinginfinite">Neon – Responsive Bootstrap & Laravel Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/neon-responsive-bootstrap-4-ui-kits-admin-template-75197.html?aff=codinginfinite"></a></figure>



<p>What is the key point in the admin dashboard HTML template for you? It should be fast, eye-catching, simple in using and full of top-notch features. You must admit that these criteria are the first thing you are thinking about while choosing the admin template.</p>



<p><strong>Neon</strong> is one more brilliant example of an HTML dashboard template and now it will try to prove it by showing its strong points.</p>



<figure class="wp-block-image"></figure>



<p>The developers of Neon built it with the latest technologies for your comfortable and marvellous work. With the help of <strong>Bootstrap 4, Laravel, PHP, HTML5, CSS3 and JQuery</strong> this template is absolutely ready to be in service. Be sure that choosing Neon you can surely rely on its stable work.</p>



<p>As for the other pack of strengthens, let’s look at the most significant and impressive.</p>



<figure class="wp-block-image"></figure>



<ul><li><strong>Plugins are never too much</strong> (almost never), and Neon creators knew that. For this reason, there you can find a lot of useful and powerful plugins which make a good effect on the dashboard performance.</li><li>Are you fond of Icons? If yes, you will be satisfied with the fact that there are more than <strong>7 sets of modern Icons</strong>. To any taste and design, try it!</li><li><strong>80+ inner pages</strong> for any situation.</li><li><strong>Horizontal vs Vertical</strong>. Your dashboard, your rules. Choose the most appropriate layout and enjoy it.</li><li><strong>Sass</strong> supported.</li><li><strong>Easy customization</strong> to save your time and make you relax. Now you have a few minutes to make a cup of coffee instead of nervous in front of the screen.</li></ul>



<p>Neon has a lot to say and show, and it is waiting for you living a demo.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/64378.html?aff=codinginfinite">Magilla – The Ultimate MultipurposeDashboard / Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/64378.html?aff=codinginfinite"></a></figure>



<p>The ideal HTML5 Bootstrap admin templates consist of a great variety of statistics, infographics which make your life easier. Also, this must be a full complex of unbelievable features and impeccable performance.</p>



<p><strong>Magilla</strong> is exactly this type of admin dashboard. It will easily control customer satisfaction, visitors’ traffic, any types of add. Yeah, this beauty can do a lot.</p>



<figure class="wp-block-image"></figure>



<p>So, let’s check it out and look inside of the Magilla. There are <strong>tones of exceptional features</strong> which you should know about.</p>



<figure class="wp-block-image"></figure>



<ul><li><strong>Several types of demos</strong>. Light or dark? Full Width or boxed? Which one is most suitable for you?</li><li><strong>E-Commerce</strong> is now a leader on the web, so in the Magilla dashboard template, you will find loads of pages for E-commerce.</li><li>It includes <strong>Mega Menu</strong>, which you can customize as you want, and special <strong>Mobile Menu</strong> for your favorite gadget.</li><li><strong>Bootstrap4, Sass, HTML5, CSS3</strong>, and <strong>JQuery</strong> – all of these guarantee a perfect process of working to you and your clients.</li><li><strong>500+ UI elements</strong> such as charts, multiple buttons, inputs and so on.</li><li>Enjoy <strong>90+ pages</strong> with <strong>2000+ Icons</strong>. What a marvelous combination!</li><li><strong>Apps</strong> are various inside: <strong>Mail App</strong> with Inbox Layout, Detail Email, <strong>Contacts App</strong> with Cards & List Option, <strong>Chat App</strong> and many others.</li></ul>



<p>Try this responsive and reliable dashboard template and safety with your website templates and other projects.</p>



<h2 class="wp-block-heading"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/booster-responsive-bootstrap-4-dashboard-ui-kits-admin-template-76572.html?aff=codinginfinite">Booster – Responsive Bootstrap & Laravel Admin Template</a></h2>



<figure class="wp-block-image"><a href="proxy.php?url=https://www.templatemonster.com/admin-templates/booster-responsive-bootstrap-4-dashboard-ui-kits-admin-template-76572.html?aff=codinginfinite"></a></figure>



<p>Multipurpose templates were in Vogue. Today is no exception. It makes life easier and more pleasant when you can purchase some products and apply them to different spheres. So, the last attractive and simple dashboard HTML template will impress you, too.</p>



<figure class="wp-block-image"></figure>



<p>Called it <strong>Booster</strong> and it differs with it developing in such a way that it can fit your custom requirement and it can be customized with excellent ease. Be ready to come closer and make some notes of this great HTML dashboard template.</p>



<figure class="wp-block-image"></figure>



<ul><li>To take care of your eyes is simple with Booster. It is <strong>Retina ready</strong>, looks crystal clear will be unique and will provide the most enjoyable user experience.</li><li><strong>Sass support</strong> will be always with you. This is CSS preprocessor, which helps to decrease repetition with CSS and saves your time a lot.</li><li>Pages to any taste. <strong>70+ is a pages’ quantity</strong> and can delete or choose only the pages you really need.</li><li>Browsers compatibility is extremely needful. All of us are unique and use various browsers. So, your clients don’t have to worry about it. <strong>Booster supports all browsers</strong>.</li><li>It is powered by <strong>Bootstrap4, the latest Laravel</strong>. This point must make you more confident in the future of this template.</li></ul>



<p>To your attention, there are lots of demos, which include all the features we were discussing. That is why pick yours and enjoy it.</p>



<h2 class="wp-block-heading">Final words</h2>



<p><em>10 HTML5 Bootstrap admin templates</em> pass away and now you are full of strong knowledge and set teeth for the best dashboard. This article was focused on the outstanding features and cool design of the templates to make you understand them fully.</p>



<p>I hope you had fun and found something yours. Make your projects brilliant with admin dashboard templates.</p>
<p>The post <a href="proxy.php?url=https://codinginfinite.com/top-10-most-impressive-admin-templates/">10 The Most Impressive Admin Templates</a> appeared first on <a href="proxy.php?url=https://codinginfinite.com">Coding Infinite</a>.</p>

</article>
<article>
<h1>Creating Email Sending Application using Asp.net Core | Open Source</h1>
<p>CodingInfinite Staff — Thu, 18 Apr 2019 16:48:46 +0000</p>
<p>Hey Guys, In this Article, we’re going to Create a very simple <strong>Email Sending</strong> Contact Form Application using <strong>C# </strong>with <strong>Asp.net Core</strong>. We’ll use a beautiful HTML5 Contact Form Template by <a href="proxy.php?url=https://colorlib.com/wp/template/contact-form-v2/">colorlib</a> for this Tutorial.</p>
<p></p>
<h2><strong>Setting Up Project</strong></h2>
<p>Let’s start by creating a new <strong>Asp.net Core</strong> Project. I’m going to create an Empty Project using <em>Dotnet CLI</em>.</p>
<p>Run this Command to create a new Empty Project.</p>
<p><code class="EnlighterJSRAW" data-enlighter-language="null">dotnet new Web</code></p>
<p>Update your <strong>“Startup.cs”</strong> to ready your Project.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="csharp">public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }
    
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseStaticFiles();
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=MailSender}/{action=Index}/{id?}");
        });
    }
}</pre>
<p>Create 3 Folders as <strong>“Controllers”</strong>, <strong>“Views”</strong> & <strong>“wwwroot” </strong>at the root directory of your project.</p>
<h2><strong>Creating Controller</strong></h2>
<p>Inside your <strong>“Controllers”</strong> Folder Create a new File as <strong>“MailSenderController.cs” </strong>& Add this Code.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="csharp">using System.Net;
using System.Net.Mail;
using FluentEmail.Core;
using Microsoft.AspNetCore.Mvc;

public class MailSenderController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public string SendEmail(string Name, string Email, string Message){
        
        try
        {
            // Credentials
            var credentials = new NetworkCredential("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f68f998384db939b979f9ab6919b979f9ad895999b">[email protected]</a>", "your-password");

            // Mail message
            var mail = new MailMessage()
            {
                From = new MailAddress("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5455485f4a56437a59555e53545d53545c5354534e5f14595557">[email protected]</a>"),
                Subject = "Email Sender App",
                Body = Message
            };

            mail.IsBodyHtml = true;
            mail.To.Add(new MailAddress(Email));

            // Smtp client
            var client = new SmtpClient()
            {
                Port = 587,
                DeliveryMethod = SmtpDeliveryMethod.Network,
                UseDefaultCredentials = false,
                Host = "smtp.gmail.com",
                EnableSsl = true,
                Credentials = credentials
            };

            client.Send(mail);

            return "Email Sent Successfully!";
        }
        catch (System.Exception e)
        {
            return e.Message;
        }
        
    }
}</pre>
<p>Don’t Forget to Update your <strong>Email </strong>&<strong> Password</strong> Credentials in this Line of Code in the above Code.</p>
<p><code class="EnlighterJSRAW" data-enlighter-language="csharp">var credentials = new NetworkCredential("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d9cfd5d28dc5cdc1c9cce0c7cdc1c9cc8ec3cfcd">[email protected]</a>", "your-password");</code></p>
<h2><strong>Setting Up Contact Form Template</strong></h2>
<p>Now, we need to Create a Contact Form for <strong>Sending Emails</strong>.</p>
<p>I’m going to use <a href="proxy.php?url=https://colorlib.com/wp/template/contact-form-v2/">this</a> beautiful Email Sending Template by colorlib.</p>
<p>So, go to this <a href="proxy.php?url=https://colorlib.com/download/182/">Link</a> & download the<strong> Source Code</strong> of Contact Page.</p>
<p>Extract the downloaded file & you’ll get this</p>
<p></p>
<p>Now, copy all the folders from the above image & paste inside the <strong>“wwwroot” </strong>directory in your project which we have created earlier.</p>
<h2><strong>Creating View</strong></h2>
<p>Create a new Folder inside the <strong>“Views” </strong>Folder as <strong>“MailSender”</strong> at the root directory of your Project.</p>
<p>Now, create a new file inside <strong>“MailSender” </strong>Folder as <strong>“Index.cshtml” </strong>& Add this Code.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="html"><!DOCTYPE html>
<html lang="en">
<head>
  <title>Contact V2
  
  

  

  

  

  

  

  

  
  




  
    
      
        
          Contact Us
        

        
          
          
        

        [email protected]">

Testing Application

Run your Application, You’ll get this

Fill the Form & click on “Send Your Message” Button.

You’ll Get an Email at the Given Email Address.

Complete Source Code of the Example is also available at Github.

Download Source Code

Secure Client Problem

You might get this Exception while trying to send an Email from your Local Host.

In this Case, you need to Allow Access for Less Secure Apps.

Using the same Google Account you have used in your Controller to Send Email, Go to this Link https://www.google.com/settings/security/lesssecureapps

& Allow Access for Less Secure App.

Now, Test your Application again, you’ll be able to receive Email from your Application.

Thank you for reading, Feel free to Comment below if you find any problem.

Here are more Articles you might be Interested

– Creating Admin Panel in Asp.net Core MVC – Step by Step Tutorial

– Top 10 .Net Core Features You need to know

– Dynamic Role-Based Authorization Asp.net Core

The post Creating Email Sending Application using Asp.net Core | Open Source appeared first on Coding Infinite.

CRUD Operations Web App using PHP & MySQL | Part 2

CodingInfinite Staff — Tue, 12 Mar 2019 17:15:27 +0000

This is the 2nd part of the CRUD Operations Tutorial & the 3rd part of the PHP Web Application Tutorial series.

If you missed previous parts, then you can find here => Getting Started with Web Application using PHP & MySQL | Tutorials

I’m assuming that you have followed the previous part of this Tutorial & created API for CRUD Operations using PHP & MySQL.

In this part, we’ll use AdminLTE Template to create UI for our CRUD API we have created in the previous part of this article.

We have also set up our Template & created the database in the First part of this Tutorial.

After following the previous article, your project structure will look like this.

We know that we have created the master.php in the First part, which is our Layout page.

We also have “Doctor” Folder at the root directory of our Project. We’ll create all pages related to Doctor in this Folder.

Let’s start by creating a page to display all doctors data into a Table.

We have created “index.php” file inside “Doctor” Folder. Update this file with the Code below.


                
                
                  
                    Dostors List
                  
                  
                  
                    
                      
                      
                        Name
                        Email
                        Phone
                        Gender
                        Specialist
                        Action
                      
                      
                      
                      
                      
                      
                        Name
                        Email
                        Phone
                        Gender
                        Specialist
                        Action
                      
                      
                    
                  
                  
                
                
              
            ';
  include('../master.php');
?>

Name	Email	Phone	Gender	Specialist	Action
Name	Email	Phone	Gender	Specialist	Action

Code Explanation

First of all, we have the content of this page in a PHP variable & then we simply included our master.php because it has the code for Layout page.

On document load, we’re using ajax to consume our read API to get all doctors.

We also have a function to remove a Doctor.

Now go to this Url => http://localhost/medibed/doctor/

you’ll see this page

Doctor remove will also work fine because of remove function ready in our code.

Now we need to create pages to Create & Update a Doctor.

Create a new file inside “Doctor” Folder with the name “create.php” & add this Code.


                
                
                  
                  
                    
                      Add Doctor
                    
                    
                    
                    
                      
                        
                          Name
                          
                        
                        
                          Email address
                          
                        
                        
                          Password
                          
                        
                        
                          Phone
                          
                        
                        
                            Gender
                            
                                
                                
                                Male
                                
                            
                            
                                
                                
                                Female
                                
                            
                        
                        
                          Specialist
                          
                        
                      
                      
                      
                        
                      
                    
                  
                  
                
              ';
  include('../master.php');
?>

Now click on Create Doctor inside Doctors SideBar Menu or go to this Url => http://localhost/medibed/doctor/create.php

You’ll see this page

Try to Create a new Doctor.

I hope everything is working as expected.

Let’s complete our Update Doctor functionality by creating a new file inside “Doctor” Folder as “update.php”

Add the below code inside this newly created file.


                
                
                  
                  
                    
                      Update Doctor
                    
                    
                    
                    
                      
                        
                          Name
                          
                        
                        
                          Email address
                          
                        
                        
                          Password
                          
                        
                        
                          Phone
                          
                        
                        
                            Gender
                            
                                
                                
                                Male
                                
                            
                            
                                
                                
                                Female
                                
                            
                        
                        
                          Specialist
                          
                        
                      
                      
                      
                        
                      
                    
                  
                  
                
              ';
              
  include('../master.php');
?>

Now you can also update any doctor record.

We have successfully created our CRUD(Create, Read, Update, Delete) Operations using Beautiful & Free UI Template.

You can also download the complete source code from GitHub.

Download Source Code

Please Comment If you found any problem.

CRUD Operations using PHP & MySQL | Tutorials with Source Code

CodingInfinite Staff — Tue, 12 Mar 2019 17:11:22 +0000

Yes, I’d say a large percentage of most applications I’ve worked on is basic CRUD(Create, Read, Update, Delete) operations. Especially In any Web Application, you need to repeat the CRUD Operations for every object in your system.

For creating beautiful & responsive UI, I’m using AdminLTE Template. So, In case if you missed the first part of this Tutorial, then you can find here => Getting Started with Web Application using PHP & MySQL | Tutorials

Assuming that you have followed the above tutorial & setup your project, let’s start our CRUD Operations Tutorial using PHP & MySQL.

Download Source Code

I’m performing my CRUD Operation on this Database Table. You can use your own Table.

Creating Folders

First of all, create a new folder at the root of your project directory as “api”.
Inside “api” folder create three folders as “config”, “objects” & “doctors”.

we’ll keep all Doctor API inside “doctors” folder.

This directory structure will help us to keep our project easy to manage.

Database Connectivity

In your “config” folder inside “api” folder, create a new file there as “database.php” and paste this code there

conn = null;
 
        try{
            $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
            $this->conn->exec("set names utf8");
        }catch(PDOException $exception){
            echo "Connection error: " . $exception->getMessage();
        }
 
        return $this->conn;
    }
}
?>

Now, your project structure should look like this.

Let’s start from creating API for CRUD operations.

I’m going to use Object Oriented Approach in this tutorial.

First of all, create a Model of your Doctor.

So, create a new file as “doctor.php” inside “objects” folder & add this Code:

conn = $db;
    }

    // read all doctors
    function read(){
    
        // select all query
        $query = "SELECT
                    `id`, `name`, `email`, `password`, `phone`, `gender`, `specialist`, `created`
                FROM
                    " . $this->table_name . " 
                ORDER BY
                    id DESC";
    
        // prepare query statement
        $stmt = $this->conn->prepare($query);
    
        // execute query
        $stmt->execute();
    
        return $stmt;
    }

    // get single doctor data
    function read_single(){
    
        // select all query
        $query = "SELECT
                    `id`, `name`, `email`, `password`, `phone`, `gender`, `specialist`, `created`
                FROM
                    " . $this->table_name . " 
                WHERE
                    id= '".$this->id."'";
    
        // prepare query statement
        $stmt = $this->conn->prepare($query);
    
        // execute query
        $stmt->execute();
        return $stmt;
    }

    // create doctor
    function create(){
    
        if($this->isAlreadyExist()){
            return false;
        }
        
        // query to insert record
        $query = "INSERT INTO  ". $this->table_name ." 
                        (`name`, `email`, `password`, `phone`, `gender`, `specialist`, `created`)
                  VALUES
                        ('".$this->name."', '".$this->email."', '".$this->password."', '".$this->phone."', '".$this->gender."', '".$this->specialist."', '".$this->created."')";
    
        // prepare query
        $stmt = $this->conn->prepare($query);
    
        // execute query
        if($stmt->execute()){
            $this->id = $this->conn->lastInsertId();
            return true;
        }

        return false;
    }

    // update doctor 
    function update(){
    
        // query to insert record
        $query = "UPDATE
                    " . $this->table_name . "
                SET
                    name='".$this->name."', email='".$this->email."', password='".$this->password."', phone='".$this->phone."', gender='".$this->gender."', specialist='".$this->specialist."'
                WHERE
                    id='".$this->id."'";
    
        // prepare query
        $stmt = $this->conn->prepare($query);
        // execute query
        if($stmt->execute()){
            return true;
        }
        return false;
    }

    // delete doctor
    function delete(){
        
        // query to insert record
        $query = "DELETE FROM
                    " . $this->table_name . "
                WHERE
                    id= '".$this->id."'";
        
        // prepare query
        $stmt = $this->conn->prepare($query);
        
        // execute query
        if($stmt->execute()){
            return true;
        }
        return false;
    }

    function isAlreadyExist(){
        $query = "SELECT *
            FROM
                " . $this->table_name . " 
            WHERE
                email='".$this->email."'";

        // prepare query statement
        $stmt = $this->conn->prepare($query);

        // execute query
        $stmt->execute();

        if($stmt->rowCount() > 0){
            return true;
        }
        else{
            return false;
        }
    }
}

you can see that we have all CRUD Operations including read_single function for reading a single Doctor record from MySQL database table.

Now, we’ll create a separate file for each operation inside “doctor” folder & we’ll call functions from “doctor.php” inside “objects” folder.

Let’s create a file inside “doctor” folder as “create.php” for creating a new doctor & add the below code inside this file.

getConnection();
 
// prepare doctor object
$doctor = new Doctor($db);
 
// set doctor property values
$doctor->name = $_POST['name'];
$doctor->email = $_POST['email'];
$doctor->password = base64_encode($_POST['password']);
$doctor->phone = $_POST['phone'];
$doctor->gender = $_POST['gender'];
$doctor->specialist = $_POST['specialist'];
$doctor->created = date('Y-m-d H:i:s');

// create the doctor
if($doctor->create()){
    $doctor_arr=array(
        "status" => true,
        "message" => "Successfully Signup!",
        "id" => $doctor->id,
        "name" => $doctor->name,
        "email" => $doctor->email,
        "phone" => $doctor->phone,
        "gender" => $doctor->gender,
        "specialist" => $doctor->specialist
    );
}
else{
    $doctor_arr=array(
        "status" => false,
        "message" => "Email already exists!"
    );
}
print_r(json_encode($doctor_arr));
?>

For reading all records from Doctors table create a file as “read.php” & add this code

getConnection();
 
// prepare doctor object
$doctor = new Doctor($db);
 
// query doctor
$stmt = $doctor->read();
$num = $stmt->rowCount();
// check if more than 0 record found
if($num>0){
 
    // doctors array
    $doctors_arr=array();
    $doctors_arr["doctors"]=array();
 
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);
        $doctor_item=array(
            "id" => $id,
            "name" => $name,
            "email" => $email,
            "password" => $password,
            "phone" => $phone,
            "gender" => $gender,
            "specialist" => $specialist,
            "created" => $created
        );
        array_push($doctors_arr["doctors"], $doctor_item);
    }
 
    echo json_encode($doctors_arr["doctors"]);
}
else{
    echo json_encode(array());
}
?>

to Update a record, create a file as “update.php” & add the code below

getConnection();
 
// prepare doctor object
$doctor = new Doctor($db);
 
// set doctor property values
$doctor->id = $_POST['id'];
$doctor->name = $_POST['name'];
$doctor->email = $_POST['email'];
$doctor->password = base64_encode($_POST['password']);
$doctor->phone = $_POST['phone'];
$doctor->gender = $_POST['gender'];
$doctor->specialist = $_POST['specialist'];
 
// create the doctor
if($doctor->update()){
    $doctor_arr=array(
        "status" => true,
        "message" => "Successfully Updated!"
    );
}
else{
    $doctor_arr=array(
        "status" => false,
        "message" => "Email already exists!"
    );
}
print_r(json_encode($doctor_arr));
?>

& for the last letter of CRUD, which is D.

create another file as “delete.php” & add this code

getConnection();
 
// prepare doctor object
$doctor = new Doctor($db);
 
// set doctor property values
$doctor->id = $_POST['id'];
 
// remove the doctor
if($doctor->delete()){
    $doctor_arr=array(
        "status" => true,
        "message" => "Successfully Removed!"
    );
}
else{
    $doctor_arr=array(
        "status" => false,
        "message" => "Doctor Cannot be deleted. may be he's assigned to a patient!"
    );
}
print_r(json_encode($doctor_arr));
?>

in the end, we need another method which is to get a single doctor record.

So, create a new file as “read_single.php” & add the below code

getConnection();
 
// prepare doctor object
$doctor = new Doctor($db);

// set ID property of doctor to be edited
$doctor->id = isset($_GET['id']) ? $_GET['id'] : die();

// read the details of doctor to be edited
$stmt = $doctor->read_single();

if($stmt->rowCount() > 0){
    // get retrieved row
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    // create array
    $doctor_arr=array(
        "id" => $row['id'],
        "name" => $row['name'],
        "email" => $row['email'],
        "password" => $row['password'],
        "phone" => $row['phone'],
        "gender" => $row['gender'],
        "specialist" => $row['specialist'],
        "created" => $row['created']
    );
}
// make it json format
print_r(json_encode($doctor_arr));
?>

After this our “api” directory will look like this

Our API for CRUD Operation is ready using PHP & MySQL. Now, we need to create UI using the template we set up in the previous article & then connect our UI with the API we created in this article.

We’ll create UI for our CRUD Operations in the next part of this Article.

Comment If you find any difficulty, I’m available to solve your problems.

Previous Part

Next Part

The post CRUD Operations using PHP & MySQL | Tutorials with Source Code appeared first on Coding Infinite.

Creating Interactive Dashboards in Asp.net Core MVC

CodingInfinite Staff — Sun, 25 Nov 2018 12:23:02 +0000

Dashboards used to represent Application’s Data. Actually one of the main purposes of a Dashboard is to give an overview of the complete application. In Applications like Admin Panel, Dashboards should be Powerfull enough to give a complete summary of your Apps running in a real-time environment.

Here’s my Tutorial, If you’re interested in Dynamic User-defined Dashboards using Asp.Net Core

This is the 7th Part of Admin Panel Tutorial Series.

Creating Dashboards breaks down into two portions:

Dashboard Design
Populating it with required data.

For the first portion, you’ll have to do CSS and HTML work. And for it, you can search for already created HTML templates.

Chats, Graphs, Tables & Tiles make the Dashboards more Interactive & help to better understand your business. So, Let’s start from here.

I’ll recommend you to always use a Template to create Dashboards because in a Template you’ll get everything already included for you. You’ll just need to download, Setup & start development.

I’ll use AdminLTE for Designing our Dashboards. If you don’t know how to setup AdminLTE Template with Asp.net Core MVC Project,

here’s the simple setup Tutorial for you => Setting up Admin Template in Asp.net Core MVC

I hope that following above article you have setup Template with your Asp.net Core project.

Add this Line at the start of your “_Layout.cshtml” page right after BootStrap css

Like this

Now Open your “Index.cshtml” inside your Views -> Home Folder & paste this code:

@model AdminPanelTutorial.Models.DashboardViewModel
  

    
    Dashboard
    Control panel
    
    
     Home
    Dashboard
    



    
    
    
        
        
        
            @Model.doctors_count
            Doctors
        
        
            
        
        More info 
        
    
    
    
        
        
        
            @Model.nurses_count
            Nurses
        
        
            
        
        More info 
        
    
    
    
        
        
        
            @Model.patients_count
            Patients
        
        
            
        
        More info 
        
    
    
    
        
        
        
            65
            This Month
        
        
            
        
        More info 
        
    
    
    
    
    
    
    
    
        
        
        
            
            Donut Chart
            
                
                
            
            
            
            
            
            
        
        
    
    
    
    
        
        
        
            
            To Do List
            
            
                «
                1
                2
                3
                »
            
            
        
        
        
            
            
            
                
                
                    
                    
                    
                
                
                
                Patient 1 Check up Time
                
                 2 mins
                
                
                
                
                
            
            
                    
                    
                    
                    
                
                Medicine for X Patient
                 4 hours
                
                
                
                
            
            
                    
                    
                    
                    
                
                New Patient Operation
                 1 day
                
                
                
                
            
            
                    
                    
                    
                    
                
                Ward Visit
                 3 days
                
                
                
                
            
            
                    
                    
                    
                    
                
                Any other Activity
                 1 week
                
                
                
                
            
            
                    
                    
                    
                    
                
                Any other Activity
                 1 month

For populating above Page with real Data from DB you need to pass Data from Controller to View.

As a Best Practise, we’ll use ViewModel.

Create a new Folder as “ViewModels” & inside this Folder create a new file with the name “DashboardViewModel.cs”

& Add this Code:

namespace AdminPanelTutorial.Models
{
    public class DashboardViewModel
    {
        public int doctors_count { get; set; }
        public int nurses_count { get; set; }
        public int patients_count { get; set; }
        
    }
}

* Don’t forget to Update namespace here & in “Index.cshtml” File’s First Line According to your project’s namespace.

Now finally add this code to your “HomeController.cs”:

using System.Linq;
using AdminPanelTutorial.Models;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;

namespace AdminPanelTutorial
{
    public class HomeController : Controller
    {
        private MyDbContext db = new MyDbContext();
        public IActionResult Index()
        {
            DashboardViewModel dashboard = new DashboardViewModel();
            
            dashboard.doctors_count = db.Doctors.Count();
            dashboard.nurses_count = db.Nurses.Count();
            dashboard.patients_count = db.Patients.Count();

            return View(dashboard);
        }
    }
}

Run your Application & you’ll see this page.

I’m just getting Doctors, Nurses & Patients count & displaying in my Dashboard as an example, you can Create ViewModel according to your Dashboard Design.

Running your project, you’ll see your Dashboard with real Doctors, Nurses & Patients count.

* Explore the AdminLTE Template to design your more Interactive Dashboards. Your Application can have more than one Dashboard.

Comment below If you find any difficulty or If you find this tutorial helpful.

CRUD Operations

User’s Activity Logging

The post Creating Interactive Dashboards in Asp.net Core MVC appeared first on Coding Infinite.

CRUD Operations in Asp.net Core MVC

CodingInfinite Staff — Sat, 10 Nov 2018 07:42:39 +0000

Yes, I’d say a large percentage of most applications I’ve worked on is basic CRUD(Create, Read, Update, Delete) operations. Especially In an Admin Panel, you need to repeat the CRUD Operations for every object in your system.

For creating beautiful & responsive UI, I’m using AdminLTE Template. So, In case if you missed Setting up AdminLTE in Asp.net Core, then you can find here => Setting up Admin Template in Asp.net Core MVC

Assuming that you have followed the above tutorial & setup your project, let’s start our Asp.net Core CRUD Operations Tutorial.

This is the 6th Part of Admin Panel Tutorial Series.

If you want to create Models from MySQL Database then you can follow this Article => Entity Framework Core Database First – Asp.Net Core Scaffold MySql DB

I’m performing my CRUD Operation on this Database Table. You can use your own Table.

First of all, create a Controller as “DoctorsController.cs” & Add this Code.

using System.Linq;
using AdminPanelTutorial.Models;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;

namespace AdminPanelTutorial
{
    public class DoctorsController : Controller
    {
        MyDbContext db = new MyDbContext();
        public ActionResult Index()
        {
            return View(db.Doctors.ToList());
        }

        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult CreateDoctor(Doctors doctor){
            db.Doctors.Add(doctor);
            db.SaveChanges();
            return RedirectToAction("Index", "Doctors");
        }

        [HttpPost]
        public bool Delete(int id){
            try
            {
                Doctors doctor = db.Doctors.Where(s => s.Id == id).First();
                db.Doctors.Remove(doctor);
                db.SaveChanges();
                return true;
            }
            catch (System.Exception)
            {
                return false;
            }
            
        }

        public ActionResult Update(int id){
            return View(db.Doctors.Where(s => s.Id == id).First());
        }

        [HttpPost]
        public ActionResult UpdateDoctor(Doctors doctor){
            Doctors d = db.Doctors.Where(s => s.Id == doctor.Id).First();
            d.Name = doctor.Name;
            d.Phone = doctor.Phone;
            d.Specialist = doctor.Specialist;
            db.SaveChanges();
            return RedirectToAction("Index", "Doctors");
        }
    }
}

* Update your Solution name

Code Explanation:

We have an Index Method to list all records from Doctors Table to our DataTable.

We have Create Method to open Create Doctor Form & when we Submit this Form our CreateDoctor will be used to Add Doctor into the Database.

You must Encrypt your Password before storing it into Database. You may follow this Tutorial for Password Hashing Code => C# Hashing algorithm class

We have only one Method to Delete Doctor because we’ll use Ajax to delete our Doctor.

Now Create a new Folder as “Doctors” inside your “Views” Folder & Create these 3 Files inside “Doctors” Folders => “Index.cshtml”, “Create.cshtml”, “Update.cshtml”

Add this Code into your “Index.cshtml”

@model IEnumerable


    
    Doctors
    
    
     Home
    Doctors
    



    
    
        
        
            Manage Doctors
        
        
        
            
                @foreach (var item in Model)
                {
                    
                }
            
            
            
                Id
                Name
                Email
                Phone
                Created
                Specialist
                Action
            
            
            
                    @Html.DisplayFor(modelItem => item.Id)
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.DisplayFor(modelItem => item.Email)
                    @Html.DisplayFor(modelItem => item.Phone)
                    @Html.DisplayFor(modelItem => item.Created)
                    @Html.DisplayFor(modelItem => item.Specialist)
                    Update | Delete

Id	Name	Email	Phone	Created	Specialist	Action
@Html.DisplayFor(modelItem => item.Id)	@Html.DisplayFor(modelItem => item.Name)	@Html.DisplayFor(modelItem => item.Email)	@Html.DisplayFor(modelItem => item.Phone)	@Html.DisplayFor(modelItem => item.Created)	@Html.DisplayFor(modelItem => item.Specialist)	Update \| Delete

* Don’t forget to replace your Solution name with “AdminPanelTutorial” at the very First line of this Code

Add “DataTables” css file into your “_Layout.cshtml” (Created in the First Part of this Tutorial) after BootStrap css added at the start of the File

your “_Layout.cshtml” will look like this

You can see that I have already Added Ajax at the End of the Code above to Delete the Doctor Record from the Database.

Now run your Project & go to http://localhost:port/Doctors (replace your port)

you’ll see All Doctors from your Database Table.

You can Also Test Your Delete Operation, It should work fine.

Let’s move Further & Add Code below into your “Create.cshtml”

Run your project & go to https://localhost:port/Doctors/Create

You’ll see this Page

Try to create a new Doctor, It will Add new Doctor & redirect you to Index Page.

Now the last thing is our Update Operation.

Open your “Update.cshtml” file Add this Code

@model AdminPanelTutorial.Models.Doctors


    
    Doctors
    



    
    
    
        Update Doctor
    
    
    
    
        
        
            Email
            
            
            
        
        
            Name
            
            
            
        
        
            Phone
            
            
            
        
        
            Specialist

* Don’t forget to replace your Solution name with “AdminPanelTutorial” at the very First line of this Code

Now run your Project & Update a Doctor Record.

I hope that everything is working fine & your CRUD operations are working perfectly. You can use your UI Template & Database Table for Performing your CRUD Operations. I used This AdminLTE Template just to Beautify our UI you can use your own.

You can also download the complete project from GitHub.

Download Source Code

Comment If you find any Difficulty, I’m here to help you. I’ll reply you with Solution as soon as possible.

Creating Login Page Asp.net Core

Creating Interactive Dashboards

The post CRUD Operations in Asp.net Core MVC appeared first on Coding Infinite.

Signup Login page in PHP with Database MySQL Source Code

CodingInfinite Staff — Sun, 27 May 2018 21:51:31 +0000

I have also written step by step Tutorial for Restful Web Services in PHP Example – PHP + MySQL Best Practice. Today I’m going to connect login & Signup Webservices using Login & Signup HTML page. You can use any HTML page, I’m using This because it has a really beautiful design and has Form for both Login & Signup.

What we’ll cover in Signup Login page in PHP with Database

File Structure
Creating HTML page
Connecting HTML page with Webservices

File Structure

We’ll use this folders & files structure inside our “app” folder for our Login & Signup page.

index.html
|
assets
├─── css
├────── style.css
api
├─── config/
├────── database.php – file used for connecting to the database.
├─── objects/
├────── user.php – contains properties and methods for “user” database queries.
├─── User/
├────── signup.php – file that will accept user data to be saved to the DB.
├────── login.php – file that will accept username & password and validate

as you can see that we have added pages and assets folders, pages folder will contain all HTML pages and assets folder is for CSS, JS, images etc.

Creating HTML page

as I stated that you can create your own design or you can use any other design, for this tutorial I’m using This template and I just modified it according to my Webservices.

Get Complete Page HTML Code

inside your “app” folder, create a new file as “index.html” and paste this code there





  
  PHP Learning
  
  
  

      

  




  
  
    Sign In
    Sign Up
    
      
        
          Username
          
        
        
          Password
          
        
        
          
           Keep me Signed in
        
        
          
        
        
        
          Forgot Password?
        
      
      
        
          Username
          
        
        
          Password
          
        
        
          Confirm Password
          
        
        
          
        
        
        
          Already Member?

Now go to the “assets” folder and create a new folder as “css” and create a new file there as “style.css” and paste this code there

body{
  margin:0;
  color:#6a6f8c;
  background:#c8c8c8;
  font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
  width:100%;
  margin:auto;
  margin-top: 30px;
  max-width:525px;
  min-height:570px;
  position:relative;
  background:url(http://codinginfinite.com/demo/images/bg.jpg) no-repeat center;
  box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
  width:100%;
  height:100%;
  position:absolute;
  padding:90px 70px 50px 70px;
  background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  -webkit-transform:rotateY(180deg);
          transform:rotateY(180deg);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
  display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
  text-transform:uppercase;
}
.login-html .tab{
  font-size:22px;
  margin-right:15px;
  padding-bottom:5px;
  margin:0 15px 10px 0;
  display:inline-block;
  border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
  color:#fff;
  border-color:#1161ee;
}
.login-form{
  min-height:345px;
  position:relative;
  -webkit-perspective:1000px;
          perspective:1000px;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
}
.login-form .group{
  margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
  width:100%;
  color:#fff;
  display:block;
}
.login-form .group .input,
.login-form .group .button{
  border:none;
  padding:15px 20px;
  border-radius:25px;
  background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
  text-security:circle;
  -webkit-text-security:circle;
}
.login-form .group .label{
  color:#aaa;
  font-size:12px;
}
.login-form .group .button{
  background:#1161ee;
}
.login-form .group label .icon{
  width:15px;
  height:15px;
  border-radius:2px;
  position:relative;
  display:inline-block;
  background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
  content:'';
  width:10px;
  height:2px;
  background:#fff;
  position:absolute;
  transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
  left:3px;
  width:5px;
  bottom:6px;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
  top:6px;
  right:0;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
  color:#fff;
}
.login-form .group .check:checked + label .icon{
  background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
  -webkit-transform:scale(1) rotate(45deg);
          transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
  -webkit-transform:scale(1) rotate(-45deg);
          transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}

.hr{
  height:2px;
  margin:60px 0 50px 0;
  background:rgba(255,255,255,.2);
}
.foot-lnk{
  text-align:center;
}

Now you’ll see the page same as this

Connecting HTML page with Webservices

Download Login & Signup API from Github you can also create these API following my previous post, Restful Web Services in PHP Example – PHP + MySQL Best Practice

setup Database and paste “api” folder inside “app” folder.

all done, Now you can run your index.html through localhost.

CSS - Coding Infinite

Using TypeScript with Styled Components

Use TypeScript with Styled Components

1. Types Installation

2. Customized props

Testing Application

Secure Client Problem

CRUD Operations Web App using PHP & MySQL | Part 2

Dostors List

Code Explanation

Add Doctor

Update Doctor

CRUD Operations using PHP & MySQL | Tutorials with Source Code

Creating Folders

Database Connectivity

Creating Interactive Dashboards in Asp.net Core MVC

Dashboard Control panel

@Model.doctors_count

@Model.nurses_count

@Model.patients_count

65

Donut Chart

To Do List

CRUD Operations in Asp.net Core MVC

Doctors

Manage Doctors

Doctors

Add Doctor

Doctors

Update Doctor

Signup Login page in PHP with Database MySQL Source Code

What we’ll cover in Signup Login page in PHP with Database

File Structure

Creating HTML page

Connecting HTML page with Webservices