Modern UI Design Project Tutorial No. 1 – Login Screen

On my previous blog posts I have shared 2 the projects with modern ui design that I created using MetroFramework Modern UI. Little by little I will show you on how I designed and created it and hopefully by the end of my video series we will be able to design a simple application with a modern design.

As of the moment I don’t have anything in mind on what application I should develop with a modern design for this video series. If you got any suggestion on what application we should develop from this video series just put it on the comment below. For now on my first Modern UI Design Project Tutorial video we will design the Login Screen.

In computer security, a login or logon or sign in or sign on refers to the credentials required to obtain access to a computer system or other restricted area. Logging in or logging on or signing in or signing on is the process by which individual access to a computer system is controlled by identifying and authenticating the user through the credentials presented by the user.
Wikipedia

On the video above you will be able learn on how to use anchor, dock and format alignment. I used anchor mor often to make sure that the controls that I place on my form or panel will stay on its position.
The highlight on this video is that you will learn on how to dynamically add MetroTile and use it as MetroStyle selector for you project.

Check out Modern UI Design Project Tutorial No. 2 – Database & Settings

If you find this post interesting please subscribe to our YouTube channel DenRic Denise INFO

You can now download Modern UI Project Tutorial No. 1 – Login Screen Project here

Modern UI Design Project Tutorial No. 1 – Login Screen
denricdenise.

Modern UI Design Project Tutorial No. 2 – Database & Settings

Here on our 2nd video tutorial for Modern UI Design Project we will cover about saving user settings and connect our application to a MySql server. This tutorial will include on how to create MySql database and table. If you don’t know on how to install and configure MySql please check out my blog post How To Install mySQL in Windows 10, you can also check MySql Statements You Should Know from where you can get learn on how to create database and table.

Storing user settings

One of the focus of this tutorial is on how to store user settings. There are several ways on how to store user settings. One is by saving it to registry, second is use a custom XML and the easiest one is using the Settings file of visual studio.

.NET Framework allows you to create and access values that are persisted between application execution sessions. These values are called settings. Settings can represent user preferences, or valuable information the application needs to use. MSDN

Connect project to a MySql server

Another focus of this tutorial is on how to connect our project to a MySql server. Before we can connect MySql server to our project we need to install MySql .net connector, you can use NuGet or you can just follow my my blog post How To Use MySql Connector Net

Learn more about User Settings and Application Settings

MySql Connection String

"Server=[server name];Port=[port no.];Database=[database name];Uid=[db username];Pwd=[db password];";

Check out Modern UI Design Project Tutorial No. 1 – Login Screen

If you find this post interesting please subscribe to our YouTube channel DenRic Denise INFO

Update (12-October-2015)

You can now download the project on this tutorial here.

Modern UI Design Project Tutorial No. 2
denricdenise.

What is Application Settings and User Settings

Application Settings and User Settings was first introduce in .net framework 2.0 wherein we can create and access values that are persisted between application execution sessions. Settings can represent user preferences, or valuable data that can be use on the entire application.

<span></span>// <![CDATA[ (adsbygoogle = window.adsbygoogle || []).push({}); // ]]> // ]]>Using Application Settings and User Settings is one mechanisms for programmers to easily store settings and access them in memory whenever needed. You can store user define color, theme and connection string to your database. Application Settings and User Settings can be stored as any data type that can be serialized to XML or has a TypeConverter that implements ToString/FromString.

Check out Modern UI Design Project Tutorial No. 2 to see on how I use Settings.

Using Application Settings and User Settings

When we create a new windows forms project in Visual Studio there is a folder called Properties.  Inside that older you can see a Settings.settings file.  We need to select and double-click that Settings.settings file to open the settings table.

Settings.Settings Table

Choosing between Application Settings and User Settings

If you will check on the table above there is a Scope column.  Setting it between  application/user indicates whether the setting will be changed by the user or not.  The user setting is reset every each user installation.

Application – It is read only and cannot be change by user.  It is constant in every instance of the application.

User – it is not read only and can be changed by whenever needed.  Reset every each user installation

How to Retrieve and Update Application and User Settings

Example we created setting with a name Database, we can retrieve the value assigned to that settings by using the code below :

C#

inputBox.Text = Properties.<u>Settings</u>.Default.SavedInputString;

VB

inputBox.Text = Properties.<u>Settings</u>.Default.SavedInputString

When we change value of a user setting, we just need to use the code below to save our changes :
C#

Properties.Settings.Default.Save();

VB

Properties.Settings.Default.Save()

User Settings and Application Settings
denricdenise.

How To Backup MySql Database Through Code

On our first two tutorials about Modern Project design we manage to discuss on how to design login screen and connect our project to a MySql database, now I will show you on how to Backup MySql Database through code.  To backup MySql database we need to add a external application on our project which is called MySqlDump.

The mysqldump client is a backup program originally written by Igor Romanenko. It can be used to dump a database or a collection of databases for backup or transfer to another SQL server
MySQL

We can use MySqlDump as it is by using a command prompt and pass several parameters like –host (server name or IP), –port (mysql Port), –user (database user name), –password (database password) , database name and we also need to specify from where we are going to save the backup by passing a filename.

mysqldump --host=[server name or IP] --port=[port no] --user=[user name] --password=[password] [database name]  > [filname]

We need to add mysqldump exe file inside our Resources folder that we added on our project.  And inside our code we need to create a new function call DoBackup. DoBackup function will contain all the codes that will create the batch file and executing it.

On this code we are creating a batch file using StreamWriter.  The batch file will execute mysqldump and pass the parameters needed to make a backup.

StreamWriter _sw = File.CreateText(_batfile);
_sw.WriteLine(@"""" + Application.StartupPath + @"\Resources\mysqldump"" --host=" + Settings.Default.Server + " --port=" + Settings.Default.Port + " --user=" + Settings.Default.Username + " --password=" + Settings.Default.Password + " " + Settings.Default.Database + " --routines > " + @"""" + _sqlfile + @"""");
_sw.Close();
_sw.Dispose();

Once we have created the batch file we now need to execute it using a Process.

Process _bu = new Process();
_bu.StartInfo.FileName = _batfile;
_bu.StartInfo.CreateNoWindow = true;
_bu.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
_bu.StartInfo.RedirectStandardError = true;
_bu.StartInfo.UseShellExecute = false;
_bu.Start();

while (!_bu.HasExited)
{
//Application.DoEvents();
}

_bu.Dispose();
_bu = null;

if (!File.Exists(_sqlfile))
{
_return = false;
}
else
{
File.Copy(_sqlfile, filename);
}

Once we have the DoBackup function we can just call it and pass a filename parameter. We can use SaveFileDialog to specify the save directory and filename.

SaveFileDialog _dia = new SaveFileDialog();
_dia.Title = "Backup Database";
_dia.Filter = "SQL files (*.sql)|*.sql";
_dia.FileName = _filename;
_dia.DefaultExt = "*.sql";
_dia.InitialDirectory = string.Empty;
if (_dia.ShowDialog() == DialogResult.OK && !String.IsNullOrEmpty(_dia.FileName.Trim()))
{
_filename = _dia.FileName;
}
else
{
_close = true;
}

Update (12-October-2015)

You can now download the file that I created on this tutorial here.

How To Backup MySql Database Through Code
denricdenise.

Restore MySql Database Using Visual Studio

Backup and Restore MySQL Database are great feature in any application. This will give your admin users the ability to back up and restore MySQL  database without having direct access to server. Once you have the backup feature it can lead to another feature like the automatic backup, wherein you will specify a time you want to generate a backup.

Please check out  User Settings and Application Settings

On this video Restore MySql Database Using Visual Studio I will show you on how to create the restore MySQL program from where we can restore the MySQL database backup that we can generate from the code on my previous video that I shared with you which is How To Backup MySql Database Through Code.

We will be using `mysql.exe` to restore our MySQL backup file. The `mysql.exe` can be found under bin folder of the installation path of our MySQL server.

If you don’t know how to install and configure MySQL serve please check this post How To Install mySQL in Windows 10.

We can also use `mysql.exe` directly using command prompt using the code below.

mysql -h[server] -P[port] -u[username] -p[password] [databasename] --max_allowed_packet=16M < [filename]);

Please watch the entire video to learn the code.

Update (12-October-2015)

You can now download the file from this tutorial here

Restore MySql Database Using Visual Studio
denricdenise.

How To Compress MySQL Backup

On this video I will show you on how to compress MySQL backup. On our previous videos we already created a MySQL database backup and restore function. We will make a few changes to the backup function so that we can compress MySQL backup. To compress MySQL backup we will be using 7-zip application.

7-Zip is an open source file archiver, an application used primarily to compress files. 7-Zip uses its own 7z archive format, but can read and write several other archive formats. The program can be used from a command line interface, graphical user interface, or with a window-based shell integration. 7-Zip began in 1999 and is developed by Igor Pavlov. The cross-platform version of the command line utility, p7zip, is also available.
Wikipedia

We will be using our project for Modern UI tutorial. If you don’t have a copy please check out the download section of this site.

In order to use 7-zip as an archiving tool for our project we need to grab a copy of its installer at 7-zip.org. Once we have the copy of the installer just install it on your PC and get a copy of 7z.exe and 7z.dll. Add 7z.exe and 7z.dll under Resources folder of our project just like what we did in mysqldump.exe and mysql.exe.

Compress MySql Backup
denricdenise.

MetroStyleManager How To Use – Bug Free

On this post MetroStyleManager How To Use – Bug Free, I will show you the fixed that I made for the MetroStyleManager. On my older post for MetroStyleManager How To Use Metro Style Manager I showed you on how to use the MetroStyleManager and apply the same theme and style from parent form to child form. Unfortunately there is bug on it that the controls inside the child form didn’t inherit the same theme and style from parent form.

(adsbygoogle = window.adsbygoogle || []).push({}); // ]]>
I also include that fixed for MetroContextMenu which is not capturing the correct theme and style.

Old way to apply same style from parent form to child form

ChildForm _chld = new ChildForm();
_chld.StyleManager = this.StyleManager;
_chld.ShowDialog();

_chld.Dispose();

Correct way to apply same style from parent form to child form

ChildForm _chld = new ChildForm();
this.StyleManager.Clone(_chld);
_chld.ShowDialog();

_chld.Dispose();

I will include this update on my next compile, which will also include some features for MetroTextBox and MetroTileControl.  For those who are waiting for MetroListView and MetroTreeView there is a little delay cause I got busy these past few months because I moved to another company.




This updated is already uploaded on my GitHub account. If you want to compile it by yourself you can do so. Just check it our here Dennis Magno GitHub Account

Because I am not around for a few months I got a lot of questions and suggestion from my email and comments.  I will try to answer them out as quickly as possible.

Please subscribe to our YouTube Channerl DenRic Denise – INFO 

MetroStyleManager How To Use – Bug Free
denricdenise.

MetroListView Is Coming in MetroFramework

To all the people patiently waiting for MetroListView, your wait is almost over. The development MetroListView is almost done and it will be included in MetroFramework. The “View.Details” is almost finish the LargeIcon, List, SmallIcon and Tile is also done but need more refinement and more testing.  The most challenging part right now is to remove the flickering when it is being scrolled.  The scrollbar for this ListView is already the MetroScrollBar.

This is the code that I used to load some data to the ListView.

metroListView1.BeginUpdate();
metroListView1.Items.Clear();
metroListView1.View = View.Details;
// Add a column with width 20 and left alignment.
//Set Columns
metroListView1.Columns.Add("Col1");
metroListView1.Columns.Add("Col2");
metroListView1.Columns.Add("Col3");
metroListView1.Columns.Add("Col4");
metroListView1.Columns.Add("Col5");
metroListView1.CheckBoxes = true;

//Fill Rows
for (int i = 0; i < 1000; i++)
{
ListViewItem lvi;
lvi = new ListViewItem(new string[] { "Aaaaa Sample" + i, "Bbbbb" + i, "Cccccc" + i, "Ddddd" + +i, "Eeeee" + +i });
metroListView1.Items.Add(lvi);
metroListView1.Items[0].Checked = true;
}

metroListView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.ColumnContent);
metroListView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
metroListView1.EndUpdate();
metroListView1.AllowSorting = true;

I used BeginUpdate and EndUpdate to make it loading faster. Be the first to get this update when it is available. Make sure to Subscribe to our YouTube Channel DenRic Denise – INFO or You can check out my GitHub account Dennis Magno

MetroListView Is Coming in MetroFramework
denricdenise.

Exact Asia is Hiring

My current company Exact Asia is Hiring. We are currently looking for talented Software Engineers and Web Developers. Required experience is 3 years and above. Exact Asia Development Center is located in GTower Jalan Tun Razak Kuala Lumpur Federal Territory of Kuala Lumpur Malaysia. Advantages of working at Exact is Flexible working hours between Monday to Friday, unlimited softdrinks and breakfast. Benifits : Medical, Miscellaneous allowance, Dental, Vision, EPF Enchancement;Vacation Incentive etc.

If you are looking for a Job here in Malaysia or you know someone who wanter to work here.

Please email me your resume at dimagnoph@gmail.com

The following positions are currenly available, Software Engineers – .net , VB6, C++, Full Stack Senior Software Engineer (Titan team), Technical Trainer, Senior Credit Control Executive and Documentation Specialist.

Please email me your resume at dimagnoph@gmail.com

Software Engineer – .Net – Check next Page for Requirements

Our Company Is Hiring
denricdenise.

VB Modern UI Design Tutorial No. 01 – Login Screen

On this video VB Modern UI Design Tutorial I will show you on how to convert the Modern UI Design Tutorial No. 01 to a VB.Net project. For the design part you can refer to C# project, it is basically just proper placing of the controls. In project I also used the Metro Sliding Panel which also created on my previous tutorials and it is available in VB and C#.

Converting this into a VB Modern UI Design Tutorial is not that too technical. You can need to know the correct syntax for declaring and raising events and aswell as creating variables.

The following are some of the important codes to convert.  The rest is pretty straight forward to follow.

public event EventHandler SettingClosed;
public event EventHandler LogInSuccess;

Public Event SettingClosed As EventHandler
Public Event LogInSuccess As EventHandler

for (int i = 3; i < 13; i++)
{
MetroTile _tile = new MetroTile();
_tile.Size = new Size(30, 30);
_tile.Tag = i;
_tile.Style = (MetroColorStyle)i;
_tile.Click += _tile_Click;
flpSettings.Controls.Add(_tile);
}

For i = 3 To 12
Dim _tile As New MetroTile
_tile.Size = New Size(30, 30)
_tile.Tag = i
_tile.Style = DirectCast(i, MetroColorStyle)
AddHandler _tile.Click, AddressOf _tile_Click
flpSettings.Controls.Add(_tile)
Next

VB Modern UI Design Tutorial No. 01
denricdenise.

MetroFramework POS Source Code

MetroFramework POS Source Code is now available.  This MetroFramework POS Source Code is a project which I have posted before as a sample MetroFramework Modern UI Project.  You can also watch the video from my YouTube.  Unfortunately I cannot give it for free. I will charge a minimal fee for the source code if there will be atleast a number people will show their interest for it.

Anyone interested please email me for the price @ dimagnoph@gmail.com

A lot of people liked the design and most probably you will like how it is integrated with a web application to monitor the sales online. This can be improved more to be a off the shelf product.

Together with the POS source code I will also give the source code for the web monitoring which is created using PHP.

Anyone interested please email me for the price @ dimagnoph@gmail.com

MetroFramework POS Source Code
denricdenise.

Modern UI Project Source Code

Since selling the MetroFramework POS Source Code is a success, the MetroFramework Modern UI Sample Project from my blog post MetroFramework Modern UI Sample Project is also now available for a fee. You can also watch the video directly from my YouTube Channel DenRic Denise INFO.

Anyone interested please email me for the price @ dimagnoph@gmail.com

After the successful release of MetroFramework POS Source Code I decided to release my other project for a fee. It is a simple project but it contains a lot of custom controls. Please see images below for the sample screens.

Anyone interested please email me for the price @ dimagnoph@gmail.com

Modern UI Project Source Code
denricdenise.

Modern UI POS PayPal Donate

Get the sourcecode of Modern UI POS PayPal donate.  I need some help to raise some funds on my PayPal account that is why I setup this donate and reward program.

Modern UI POS PayPal Donate
denricdenise.

MetroMessageBox Localized – Preview

MetroMessageBox Localized is one of the features that will be included on the next release of Modern UI MetroFramework.
I received some emails asking on how to localized the MetroToggle and MetroMessageBox. Earlier while I got board with some project, I checked on the MetroFramework code and saw the MetroLocalize class. This is already being used in MetroToggle but the XML needs to be compiled inside the MetroFramework project.

So I played around the code to make use Localization XML file that can be added from the project that will be using the MetroFramework. Luckily I was able to make it work.

Just need some few adjustments and fine tuning to make it work as smooth as silk.

Please subscribe to our YouTube Channel

MetroMessageBox Localized – Preview
denricdenise.

MetroFramework Modern UI Version 1.4.0

Today July 10, 2016 I have compiled MetroFramework Modern UI Version 1.4.0 which include MetroListView and allow to localization for the MetroMessageBox and the MetroToggle button. Yes you read it right finally after several months of announcing that MetroListView will be included in MetroFramework Modern UI, finally it is here.

I admit that it is not yet perfect cause I haven’t use MetroListView that much on my projects and that means it is not yet thoroughly tested.  So you guys out there who is waiting for MetroListView it is now available in MetroFramework Modern UI Version 1.4.0 and please help me to test it thoroughly.  If you find any bug please put it on the comment section below.

Localized MetroMessageBox 

This update was just recenlty added after I checked the MetroLocalize.cs and made some changed to make it work.

UPDATED (13-JULY-2016) : Please see update on next page

Move To Next Page For The Download Link

MetroFramework Modern UI Version 1.4.0
denricdenise.

How To Use MetroFramework Localization

On this tutorial I will show you on how to use metroframework localization. On the previous release MetroMessagebox and MetroToggle can now be localized or will allow you to change the language of the buttons. The language will change will be based on the culture info that is set on your application.

To change the culture information of your application you first need to know the Windows Locale code of the language that you want to use. Please refere to this link for the list of Windows Locale Codes.

Here is the code to change the culture information of your application.

System.Globalization.CultureInfo cultureInfo = new System.Globalization.CultureInfo("de-DE");
Application.CurrentCulture = cultureInfo;

On your project you need to add a folder named Localization and under that folder create a folder with the name of the Windows Locale code that you want to use. For example de for Germany.

Proceed to next page for the XML format

How To Use MetroFramework Localization
denricdenise.

How To Install IIS in Windows 10

On this video I will show you on how to set up and How To Install IIS in Windows 10. IIS is one of the important things to be setup by Web Developers who is using ASP.Net or ASP.Net MVC. If you have an IIS installed on your machine you can play around with it and test on how to set up your web applications.

Internet Information Services (IIS, formerly Internet Information Server) is an extensible web server created by Microsoft for use with Windows NT family. IIS supports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP. It has been an integral part of the Windows NT family since Windows NT 4.0, though it may be absent from some editions (e.g. Windows XP Home edition), and is not active by default.
Wikipedia

Currently the IIS version available on Windows 10 is IIS 10.

Lets now begin our tutorial on How To Install IIS in Windows 10.
1. Click search and type “appwiz.cpl”
2. Under Program and Feature select Turn Windows features on or off
3. Look for Internnet Information Service node
4. Select and check the following options :

• Web Management Tools>IIS Management Console
• World Wide Web Services>Application Development Features>.Net Extensibility 3.5
• World Wide Web Services>Application Development Features>.Net Extensibility 4.6
• World Wide Web Services>Application Development Features>ASP.Net 3.5
• World Wide Web Services>Application Development Features>ASP.Net 4.6
• World Wide Web Services>Application Development Features>CGI
• World Wide Web Services>Application Development Features>ISAPI Extensions
• World Wide Web Services>Application Development Features>ISAPI Filters
• World Wide Web Services>Common HTTP Features>Default Document
• World Wide Web Services>Common HTTP Features>Directory Browsing
• World Wide Web Services>Common HTTP Features>HTTP Errors
• World Wide Web Services>Common HTTP Features>Static Content

5. After selecting all the necessary nodes just click OK to start the installation process.
6. Once setup is done, you can open any web browser and navigate to this URL http://localhost or http://127.0.0.1

How To Install IIS in Windows 10
denricdenise.

No Install PHP and MySQL on Windows 10

No Install PHP and MySQL on Windows 10 using application called USBWebserver.  As of this moment the current version of USBWebserver is 8.6.  USBWebserver is a free lightweight application that can be used to run an Apache server and MySql server without installing it.

USBWebserver is a combination of the popular web server software: Apache, MySQL, Php and PhpMyAdmin. With USBWebserver it is possible to develop and show your php websites, everywhere and anytime The advantage of USBWebserver is, you can use it from USB of even CD
USBWebserver is perfect for:

• Show a offline version of your website
• Anywhere and anytime develop php websites
• No need for expensive hosting
• Working at multiple locations at projects
• A good test before putting your website online
• And many more

http://www.usbwebserver.net/en/

You might also be insterested to know on How To Install MySql in Window 10

Lets begin our tutorial about No Install PHP and MySQL on Windows 10

First we need to download the USBWebserver application from their website.  Once we have a copy of the application we need to extract it to any folder.  From the extracted files there will be a file named usbwebserver.exe this is the file that we need run in order to start our Apache and MySQL.

There are only few settings that we can set from the application.  The root directory, port number for Apache and the port number for MySql.  By default the Apache server is set to port 8080 and MySql port is set 3360.  The root directory is the folder from where we can put our php files for our PHP application.

Everytime we change the settings, we need to restart the USBWebserver application.  A green check mark beside Apache and My;sql is an indicator that our Apache and Mysql servers are up and running.

To test our webserver we can browse http://localhost:{apache port number} example http://localhost:8090.  PHPMyAdmin is also included on USBWebserver, we can use this to test our MySQL by browsing using http://localhost:{apache port number}/phpmyadmin/ example http://localhost:8090/phpmyadmin.  The default username for MySql is root and the password is usbw.

Hopefully you’ve learned something from this tutorial about No Install PHP and MySQL on Windows 10.  If you have any question or suggestions please leave your comments below.

Please subscribe to our YouTube Channel http://goo.gl/wr9Svb

No Install PHP and MySQL on Windows 10
denricdenise.

How To Setup Local FTP Server in Windows 10

In this tutorial I will guide on the steps on how to setup local FTP server in Windows 10. Having your own FTP or File Transfer Protocol server can be one of the easiest and most convenient solutions specially when creating and testing an application that needs to be connected to an FTP server. This can also be use on your own private network at home or on your small businesses.

In order to setup an FTP server an IIS needs to be enabled on your local machine. If you don’t on How To Install IIS in Windows 10

How To Setup Local FTP Server in Windows 10

1. Click search and type “appwiz.cpl”
2. Under Program and Feature select Turn Windows features on or off
3. Look for Internnet Information Service node and expand it

 

4. Check the FTP Server option
5. Expand FTP Server and check the FTP Extensibility node
6. Check Web Management Tools with the default selections
7. And click Ok button to start the setup

After you setup local FTP server on Windows 10, please follow the step on the video on how to configure your local FTP site on Windows 10.

Please subscribe on our YouTube Channel DenRic Denise INFO

Local FTP Server in Windows 10 How To
denricdenise.

MySQL Password Changer Tool

I created this MySQL Password Changer Tool in C#. This tool will surely help a lot of people who always forgot their MySQL Password. Changing a MySQL password takes a long process and it was documented here How to Reset the Root Password.  By using the MySQL Password Changer Tool you don’t to go through the long process of stopping and starting the MySQL service, open a command promt etc. etc.

Check out my other tutorials about MySQL :
How To Install mySQL in Windows 10
No Install PHP and MySQL on Windows 10

How To Use MySQL Password Changer Tool

You need to provide 4 information in order to proceed to change your MySQL Password :

1. MySQL Service Name – You can check it out under services usually if you didn’t change it during you MySQL Configuration it should be named as MySQL
2. MySQL BIN Folder – This depends on where you install your MySQL.  By default it should be under c:\Program Files\MySQL\{MySQL Version} or c:\Program Files (x86)\MySQL\{MySQL Version}
3. MySQL INI File –  This usually located in C:ProgramData\MySQL\{MySQL Version}
4. New MySQL Password – you need to set your new MySQL Password.  Make sure not to forget it. : )

Please support us by subscribing to our YouTube Channel DenRic Denise INFO

Proceed to next page for the Download Link

MySQL Password Changer Tool : Forgot MySQL Password
denricdenise.