How to connect to XAMPP MySQL from VSCode Easily (2024)

Summary

This video tutorial explains how to connect a MySQL database to Visual Studio Code using XAMPP. It walks through the steps of setting up MySQL, installing the necessary extensions in Visual Studio Code, and creating a connection to the database. The video also covers how to run queries, create tables, and manage databases directly from Visual Studio Code, eliminating the need to access PHPMyAdmin. The tutorial provides detailed instructions for executing queries and interacting with databases efficiently.

Takeaways

• 😀 The video demonstrates how to connect to a MySQL database from Visual Studio Code using XAMPP.
• 🔧 You need to open Visual Studio Code, click on the extensions icon, and search for the MySQL extension to install it.
• 💻 Once the MySQL extension is installed, a database icon will appear in Visual Studio Code's sidebar.
• 🖥️ You can connect to the MySQL server by creating a connection, providing a name (e.g., 'Local Host'), and ensuring the MySQL server is running.
• 🌐 The connection is configured by setting the host name, port (default 3306), and providing the database's IP address if necessary.
• 📂 You can browse and interact with existing databases, such as 'myNewDB', directly from Visual Studio Code.
• 📝 Queries can be executed within the editor by clicking on 'New Query', writing SQL commands, and pressing 'Control + Enter' to run them.
• ⚙️ You can create new tables and columns within the database through the Visual Studio Code interface.
• 📊 The video shows how to create a table, run queries like 'SHOW TABLES', and interact with the resulting database data.
• ❓ The presenter encourages viewers to ask questions in the comments if they encounter any issues or need further clarification.

Q & A

What is the purpose of the video?

The purpose of the video is to show how to connect to a MySQL database using Visual Studio Code, without using PHPMyAdmin, and how to run SQL queries from Visual Studio Code.

What is the first step to connecting to a MySQL database from Visual Studio Code?

The first step is to open Visual Studio Code and click on the extensions icon or press the shortcut Ctrl + Shift + X to search for the MySQL extension.

Which MySQL extension does the video recommend installing?

The video suggests installing the MySQL extension from 'V' (the full name isn't clear in the script), which allows users to connect to a MySQL database.

Do you need to have the Apache server running to connect to MySQL from Visual Studio Code?

No, the Apache server does not need to be running. However, the MySQL server must be running for the connection to work.

How do you create a connection to the MySQL database in Visual Studio Code?

After installing the MySQL extension, click on the new database icon, then click on 'Create Connection.' Give it a name (like 'Local Host'), use the correct host IP (if different from localhost), and keep the default port and password if using the local MySQL server.

How can you run SQL queries once connected to the MySQL database in Visual Studio Code?

You can click on 'New Query,' type your query, and press Ctrl + Enter to run it. The results will be displayed in the output section.

What happens if there are no tables in the database when you run the 'SHOW TABLES' query?

If there are no tables, the output will indicate 'No tables found,' as shown in the video.

How do you create a new table from Visual Studio Code?

Click on the plus icon to create a new table. You can then specify the table name and columns, write the necessary SQL, and press Ctrl + Enter to execute the query and create the table.

What does the video demonstrate after creating a new table?

The video demonstrates that the newly created table appears in the database, and you can use the 'SELECT * FROM table_name' query to view the data (though in this case, the table is empty).

What is the benefit of using Visual Studio Code to connect to a MySQL database compared to using PHPMyAdmin?

The benefit is that you can manage and query your MySQL database directly from Visual Studio Code without needing to open PHPMyAdmin, offering a more integrated development experience.

Outlines

00:00

🔌 Connecting to MySQL from Visual Studio Code

This section introduces the goal of the video, which is to show how to connect to a MySQL database using Visual Studio Code with XAMPP. The narrator mentions having a MySQL database running and accessible via PHPMyAdmin, but the focus is on accessing the database directly from Visual Studio Code. It provides an overview of starting with installing the necessary MySQL extension in Visual Studio Code.

📥 Installing MySQL Extension in Visual Studio Code

In this part, viewers are guided on how to open Visual Studio Code, access the extensions panel, and search for the MySQL extension. The extension by a developer named 'V' is recommended for installation. While waiting for the extension to install, the narrator shows the currently running MySQL database that will be accessed through Visual Studio Code, emphasizing the need to keep the MySQL server running, even if the Apache server is turned off.

💻 Setting Up Database Connection in Visual Studio Code

Once the MySQL extension is installed, a new database icon appears in Visual Studio Code. This section details the process of creating a new connection by naming it 'Local Host,' using the default MySQL port, and optionally setting up an IP address if the database is remote. The default MySQL setup has no password, and after saving the connection, users can now connect to the database. The narrator shows the databases that appear, including those automatically created by the environment and others manually set up.

📊 Running Queries and Creating Tables

In this segment, the narrator explains how to navigate inside the connected databases, run SQL queries, and display tables using the 'Show Tables' command. Although no tables are available initially, the section covers creating a new table by clicking on a plus icon, writing a table name, adding columns, and running the query with the shortcut 'Control + Enter'. The newly created table appears under the tables section, and subsequent queries on it can also be executed.

📝 Writing and Saving SQL Queries

This part highlights how to write and save SQL queries within Visual Studio Code. Users can click the plus icon to create a new query file, where they can write and run any query they need. The example given involves selecting all data from a table ('SELECT * FROM myNewTable'), though no data is shown as the table is empty. The narrator reinforces the ease of running any kind of query, saving the queries, and accessing the data through Visual Studio Code.

❓ Final Thoughts and Call to Action

In the concluding section, the narrator wraps up the tutorial by reiterating the steps to connect and manage a MySQL database using Visual Studio Code. Viewers are encouraged to ask questions in the comments if they need further clarification.

Keywords

💡MySQL

MySQL is a widely used open-source relational database management system. In the video, the presenter demonstrates how to connect to a local MySQL database using Visual Studio Code. The main focus is on running queries, creating tables, and managing databases using MySQL.

💡Visual Studio Code

Visual Studio Code (VS Code) is a lightweight, versatile code editor developed by Microsoft. The video centers around using VS Code to access and interact with a MySQL database by installing a MySQL extension. The tool is highlighted as a convenient environment for managing databases and running SQL queries.

💡ZAMP

ZAMP (likely referring to XAMPP, a free and open-source cross-platform web server solution stack) includes MySQL, PHP, and Apache, providing an integrated development environment. The video briefly mentions starting MySQL and Apache services in ZAMP to run and manage a local database before connecting it to Visual Studio Code.

💡PHPMyAdmin

PHPMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the web. Although the presenter mentions PHPMyAdmin as a familiar tool for managing databases, the focus of the video is on managing databases via Visual Studio Code rather than using PHPMyAdmin.

💡Extension

Extensions in Visual Studio Code are additional tools or plugins that expand the functionality of the code editor. In this case, the MySQL extension is installed to allow for database management directly from VS Code. The presenter demonstrates how to search for and install the extension to connect to MySQL.

💡Localhost

Localhost refers to the local machine or computer hosting a service, often using the IP address 127.0.0.1. In the video, the MySQL database is hosted on the localhost, meaning the database runs on the same machine as the code editor (VS Code). This is crucial for connecting and managing the local database.

💡Query

A query in SQL (Structured Query Language) is a request for data or information from a database. In the video, the presenter shows how to run SQL queries like 'SHOW TABLES' and 'SELECT' commands within Visual Studio Code to interact with the database, retrieve information, and manage tables.

💡Table

A table is a fundamental structure in a database that organizes data in rows and columns. The presenter demonstrates how to create new tables in the MySQL database directly from Visual Studio Code, explaining how to define columns and structure data using SQL commands.

💡Control + Enter

Control + Enter is a keyboard shortcut in Visual Studio Code used to execute SQL queries. The presenter frequently uses this shortcut to run queries in the MySQL database, showing how efficient and quick it is to interact with the database directly from the code editor.

💡Database Icon

The database icon refers to the user interface element added to Visual Studio Code after installing the MySQL extension. This icon allows users to easily create connections to databases, manage tables, and run queries without leaving the editor, simplifying the database management workflow.

Highlights

Introduction to connecting MySQL database from XAMPP using Visual Studio Code.

Starting MySQL server through XAMPP and checking database accessibility.

Opening Visual Studio Code and installing the MySQL extension.

Accessing MySQL database from Visual Studio Code without needing to open PHPMyAdmin.

Ensuring MySQL server is running while Apache server can be turned off.

Creating a connection to the MySQL server in Visual Studio Code.

Naming the connection as 'Local Host' and configuring IP and port settings.

Connecting to the MySQL database and viewing available databases.

Running queries such as 'SHOW TABLES' directly from Visual Studio Code.

Creating new tables using a query and the plus icon feature in Visual Studio Code.

Demonstrating how to create and modify columns in a new table.

Running queries using the 'Control + Enter' shortcut to execute SQL commands.

Showing how the created table appears after running queries.

Saving and organizing queries within Visual Studio Code.

Final demonstration of selecting data from a table, though no data was present in this example.

Transcripts

welcome to this video guys in this video

I'll show you how you can connect to

mySQL database from zamp that we run

from zamp using our Visual Studio code

so I have this mySQL database here if I

start this I can uh access this from the

phsp might been part two but I will so

if I go here here also I can access this

but I'll show you how you can access

this mySQL database from PHP my admin

sorry from Visual Studio code okay so

first open your Visual Studio code click

on this extensions icon here or press

the shortcut control shift text and

search for

MySQL now you'll see a bunch of

options one MySQL from

V probably that's how you pronounce it

and just on

install and okay yeah meanwhile let's

check if this uh and this is database

that we will be connecting from PHP my

admin sorry my visual studio code now I

can turn this off also I just turned it

on so that I can show you that this is

the database these are the database my

new DB and so on so we don't need to

open PHP my admin we can just access

this from Visual Studio code so I can

stop this Apache server but this myql

server must be

running now once this is installed this

icon here this database icon will be

added click on this

and just click on create

connection and now just give this a name

I'll just call it Local Host and this is

the host name if your database server is

in another IP you can just add that IP

here instead of your Local Host IP and

this is the default port and by default

there is no password for your local

MySQL server I can just click on

Save and this will be appearing here and

now I'll just click on this and it will

be

automatically connected so as you can

see we have these three dat databases

available pH mment is created by pH

enironment and this is the database that

I have these two myu DB and test now you

can just go inside this tables and

you'll see no tables find found for now

and you can run your queries here so you

can just click on this new query here

and you can write your query let's say

show tables

and click

enter so now I can write my query here

show

tables and click on control enter to run

it and as you can see the uh output will

be shown here but since I don't have any

tables no tables have been shown now I

can create a new table by clicking on

this plus icon here and this query will

be automatically created now you can

just uh change this stuff so let's say

my

table write this here and you can add

new columns by writing column names here

and so on so again hit control enter to

run this and now if I go inside tables

as you can see this myu table is created

so if I go back to this queries and hit

control enter again as you can see the

new table is shown so yeah this is how

you can connect to a local database

server and you can access all the

databases for that user and you can

create new tables and run queries most

importantly any kind of query you want

to run you can just click on this plus

icon here and give a name to this file

new

query hit

enter okay and this new query will be

here and this has all your saved

queries okay close

this and here you can write all all your

queries let's say

select all from what was the table name

table name was my new table and now hit

control and enter together and this will

run as you can see the data will be

selected but since it is empty nothing

is shown so this is how you can connect

to my SQL Server from your V Visual

Studio code if you have any questions

let me know in the comments below